加载页面时缓慢的 Angular 应用程序答案

【问题标题】：Slow Angular application when loading page加载页面时缓慢的 Angular 应用程序
【发布时间】：2019-01-07 14:04:50
【问题描述】：

我已经看到这个问题很长时间了，并在网上搜索了一些解决方案，但我认为我没有使用正确的术语来识别问题。

当我运行$ npm start 时，我的package.json 中有以下命令

ng serve --host 0.0.0.0 --disableHostCheck --proxy-config proxy.dev.json --extract-css --show-circular-dependencies false

当我使用“npm start”启动我的应用程序时，一切似乎都可以正常工作，但是在我看到“webpack: Compiled succesfully”之后，我需要很长时间（7-8 秒）才能真正看到一个页面或我的加载屏幕（发生 HTTP 调用时会显示一个微调器）。

我很好奇编译成功和显示页面之间发生了什么。编译成功后，我看到一个空白页 7-8 秒。

显示页面后，我通过菜单导航到另一个页面，所有内容都会立即显示。但是当我手动更改 URL 并按 Enter 时，加载页面需要 7-8 秒。

发生这种情况时，我在控制台、网络选项卡或其他任何内容中都看不到任何活动...我可以检查任何东西来确定这种无响应的“差距”吗？

可能值得一提，在ng build --prod 之后使用 Apache 为应用程序提供服务时，我没有看到这个问题。

Angular 版本 5.2.11 Angular-CLI 1.7.4

网络标签

性能标签

【问题讨论】：

你为什么使用--show-circular-dependencies false标志？如果您删除它，您的应用程序仍然很慢吗？
使用性能选项卡，在 chrome 的开发工具中。您也许能够确定它是否正在解析需要一段时间的脚本。
添加了依赖标志，因为当前存在一些循环依赖警告。我们也应该解决这些问题，但我认为这不是长时间加载的原因，删除标志没有任何影响。我会按照@David 的建议查看“性能”选项卡
@David 我添加了性能选项卡的屏幕截图。不过我不知道该怎么想，我只能说很多事情似乎需要很长时间。您对此有什么意见吗？
评估 main.bundle.js 似乎需要 9 秒。在 AOT 模式下，由于删除了未使用的代码，因此执行时间更短。不过我不知道为什么要花这么长时间。

【解决方案1】：

我很好奇编译成功和显示页面。编译成功后我看到一个空白页面 7-8秒

您的浏览器需要下载应用程序的捆绑包，这些捆绑包必须很大，具体取决于您的 7-8 秒加载时间。当您$ ng serve 时，默认情况下您会在开发模式下生成捆绑包，这意味着捆绑包处于其原始大小，因此与生产模式下的捆绑包相比，它们的大小必须更大。

在生产模式--prod 中，捆绑包被缩小，因此它们很小，这意味着下载捆绑包将花费更少的时间。

如果您想注意此行为，请在浏览器中打开控制台并移至网络选项卡以查看您的浏览器正在下载的捆绑包以及所需的时间。

【讨论】：

你的回答听起来我可以接受。尽管在使用“网络”选项卡时，它似乎真的是一个很大的空白。查看我添加到原始帖子的屏幕截图
这是运行时编译所需的时间。当您使用生产模式时，您默认使用 AOT 模式，这意味着您的模块已经准备好下载。更多关于AOT编译的信息angular.io/guide/aot-compiler
好的，那么您知道在开发模式下使用 JIT 时如何提高速度吗？有人早些时候发布了关于延迟加载的帖子，但删除了他的评论，这可能有帮助吗？
延迟加载将有助于减少整体加载时间，但如果您想在 JIT 模式下减少更多时间，您需要处理您的应用程序架构（加载静态模块，检查外部库（大小、性能。 .. 您的 index.html、package.json 和 root.module 可以帮助我们识别问题。