Angular2缓慢的初始页面加载导致加载序列

Question

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

1. 我有一个很大的捆绑(约1mb),我正在努力使它变得更小,按照主题的指南.
2. 初始加载只产生一些请求,加载bundle(通常约3秒)并等待Angular应用程序进行bootstrap(~1.4秒).之后,它开始加载所有组件并加载其资源(字体,图像等).以下是请求的外观:

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

问题1:有没有办法提前加载组件资源,只是在组件加载时引用它们？

Q2:有没有办法让应用程序自举更快？

我也接受其他建议:)

编辑:

我正在使用AoT编译,提供种子,我已采取措施降低app.js文件的大小.问题仍然存在于下载结束和第一个组件的资源调用之间的差距app.js.

更新(2016-12-19):

我所做的(现在)只在服务器上:

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

这些服务器配置在NGINX和Apache上都是微不足道的,所以值得一试.

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

• 用Gulp预渲染
• 亚马逊预呈现
• AoT vs JIT编译 - 一些见解.

更新(2018-06-11):

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

• Angular Performance Workshop - Manfred Steyer
• Angular - 由Lazy Loading提供更快的性能和更好的用户体验 - 作者:Ashwin Sureshkumar

就我而言,Lazy Loading扮演着重要角色.

Answer 1

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

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

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