由加载序列引起的Angular2缓慢的初始页面加载

Question

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

1. 我有一个很大的捆绑（约1mb），我正在努力使它在a guide on the subject之后缩小。
2. 初始加载仅发出一些请求，加载包（通常约3秒）并等待Angular应用程序引导（约1.4秒）。之后，它开始加载所有组件并加载其资源（字体，图像等）。请求如下所示：



我担心即使减少了捆绑包大小，应用程序仍然可以在没有任何请求的情况下自举1.5秒，然后再等待~1秒钟来加载组件的资源。我认为这将导致大约3秒多的加载时间。由于我的应用程序相对简单，我发现这是不可接受的。

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）：

以下是一些帮助我提高初始负荷的材料：

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

就我而言，Lazy Loading扮演着重要角色。

Answer 1

Q2：您可以通过实施Ahead of Time编译来加快应用程序引导速度并减少捆绑包大小：https://angular.io/docs/ts/latest/cookbook/aot-compiler.html

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

第一季度：组件有懒惰的加载支持，但我还没有调查它的含义，其他人可能会为你回答这个部分。

Answer 2

还考虑了js的缩小/捆绑，在服务器端启用 gzip 压缩将减少加载时间。

Answer 3

购买CloudFlare DNS，我们能够将加载时间从50秒减少到4秒。也能够将刷新速度降低到大约1秒。

有一个免费版本，可以正常工作。