performance - 加载顺序导致 Angular2 初始页面加载缓慢

Question

我有从 seed 创建的 angular2 项目并且我在我的初始页面上添加了几个 Angular 组件。其中一些加载图像 - 这相对较慢，但实际问题是:

1. 我有一个很大的包 (~1mb)，我目前正在研究它以使其更小，如下 a guide on the subject .
2. 初始加载仅发出几个请求、加载包(通常约 3 秒)并等待 Angular 应用程序启动(约 1.4 秒)。之后它开始加载所有组件并加载它们的资源(字体、图像等)。以下是请求的样子:

我担心即使我减小了包的大小，应用程序仍会在不发出任何请求的情况下引导 1.5 秒，然后再次等待约 1 秒以加载组件的资源。我认为这将导致大约 3 秒以上的加载时间。由于我的应用程序相对简单，我发现这是 Not Acceptable 。

Q1:有没有办法提前加载组件资源，并在组件加载时引用它们？

Q2:有什么方法可以让应用程序的启动更快？

我也愿意接受其他建议:)

编辑:

我正在使用随种子一起提供的 AoT 编译，并且我已采取措施减小 app.js 文件的大小。问题仍然存在于 app.js 下载结束与第一个组件的资源调用之间的差距。

更新(2016-12-19):

我所做的(目前)仅在服务器上:

• 启用了 HTTP2 支持，从而显着提高了速度。
• 启用 GZIP，将 JS 的大小减少了 5 倍以上。

这些服务器配置在 NGINX 和 Apache 上很简单，因此值得一试。

现在虽然站点加载速度快了很多，但这些更改并没有解决最初的问题(问题 1 和问题 2)。因此，我正在寻找其他一些方法，如果您处于我的位置，您可能还想遵循这些方法:

• Prerendering with Gulp
• Prerendering in Amazon
• AoT vs JIT compilation - 一些见解。

更新(2018-06-11):

以下是一些帮助我提高初始负载的 Material :

• Angular Performance Workshop - Manfred Steyer
• Angular — Faster performance and better user experience with Lazy Loading - by Ashwin Sureshkumar

在我的案例中，延迟加载起着重要作用。

Answer 1

Q2:您可以通过提前编译来加快应用程序的引导速度并减小包的大小:https://angular.io/docs/ts/latest/cookbook/aot-compiler.html

就像听起来一样，模板是预编译的，所有脚本都是预先生成的，这减少了初始加载后的处理时间。此外，Angular 2 编译器未包含在您的 bundle 中，这应该会大大减少 bundle 本身的大小。

Q1:有组件的延迟加载支持，但我没有研究它需要什么，其他人也许可以为您回答这部分。