angular4页面加载速度很慢，纱线构建答案

【问题标题】：angular4 page load is very slow with yarn buildangular4页面加载速度很慢，纱线构建
【发布时间】：2017-08-30 10:55:39
【问题描述】：

我有一个 Angular4 应用程序，我使用 Yarn 构建和运行。

但它的加载速度非常慢，甚至第二次及以后加载浏览器缓存。第二次加载（使用缓存）大约需要 10 到 13 秒。在第一次加载时，我花了大约 30 秒。

请建议我哪些注意事项可以优化性能。以下是页面加载截图：

如您所见，初始加载时间非常长。我怎样才能减少它。在索引页面上有登录页面，就是这样，但所有的 javascript 和相关文件都在为它加载。

【问题讨论】：

你运行什么命令？您是否每次都使用该命令构建应用程序？
ng build --prod
ng build -prod 每次都会构建您的应用程序，尝试运行 ng serve
ng serve - 运行应用程序，但我的生产环境需要应用程序，因为需要 ng build -prod。
我的意思是你不需要每次都运行ng build -prod，你需要运行一次来创建dist文件夹或者你定义的任何路径来编译你的应用程序。当您提供应用程序时，它会在该文件夹中查找已编译的代码

【解决方案1】：

正如 Aman Jain 所提到的，您可以使用 AOT 加快加载时间，这将有助于减少初始加载时间，因为您的代码是预编译的，因此不需要将 ng2 编译器发送到客户端。这也将自动为您应用 tree-shaking，丢弃您的应用程序未使用的模块，这也可以显着减少初始负载。

不过，影响加载时间的另一个因素是应用的架构，尤其是模块的加载方式。如果您目前没有使用延迟加载，建议您查看一下：https://angular.io/guide/ngmodule#lazy-loading-modules-with-the-router

如果您希望浏览器为所有路由和子路由加载所有模块和依赖项（在初始应用加载时发送厨房水槽），那么加载时间将会增加。但是，延迟加载使用的是一种路由方案，客户端只加载与当前路由相关的模块。

【讨论】：