Angular2 加载顺序导致的初始页面加载缓慢答案

【问题标题】：Angular2 slow initial page load caused of load sequenceAngular2 加载顺序导致的初始页面加载缓慢
【发布时间】：2017-03-01 12:05:11
【问题描述】：

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

我有一个很大 (~1mb) 的捆绑包，我目前正在努力使其更小，关注 a guide on the subject。
初始加载只发出几个请求，加载包（通常约 3 秒）并等待 Angular 应用程序启动（约 1.4 秒）。之后，它开始加载所有组件并加载它们的资源（字体、图像等）。请求如下所示：

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

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

Q2：有没有办法让应用程序启动更快？

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

编辑：

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

我（目前）所做的只是在服务器上：

这些服务器配置在 NGINX 和 Apache 上是微不足道的，因此值得一试。

现在，尽管网站加载速度更快，但这些更改并不能解决最初的问题（问题 1 和问题 2）。因此，我正在寻找一些其他方法，如果您在我的位置，您可能也想遵循：

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

就我而言，延迟加载发挥了重要作用。

【问题讨论】：

【解决方案1】：

Q2：您可以通过实现 Ahead of Time 编译使应用程序引导更快并减小包大小：https://angular.io/docs/ts/latest/cookbook/aot-compiler.html

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

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

【讨论】：

我将 angular2 与 systemjs 一起使用，并使用延迟加载的路由。我发现该应用程序在桌面上启动需要 4 秒，在 android/mobile 上需要 12 秒，在 iPhone 上需要 5 秒。你知道我可以将我的应用程序移动到哪些好的种子应用程序，以提高加载速度吗？我需要更快地加载我的应用程序。

【解决方案2】：

同时考虑到 js 的压缩/打包，在服务器端启用 gzip 压缩会减少加载时间。

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

您必须尽可能多地减少 main.js 包，main.js 中的信息越多，处理它所需的时间就越长。检查 app.module 中的导入并使用延迟加载。

【讨论】：