我的应用程序在 ng serve 上构建速度慢的可能原因是什么？

Question

我的编译和输出更改结果非常慢。

我当前的 ng serve 在大约 20 秒内对文件进行简单的文本更改后运行更新。 （其实编译时间很短，3-5秒），另外15秒是浏览器重新加载的过程。我在网络选项卡中发现，花费时间最长的进程是websocket，而它消耗了13秒。

对于这种情况，根本原因可能是什么？ 是因为我正在使用外部库，如 rxjs 和 lodash 吗？ 是因为我在每个 scss 文件中导入了 bootstrap css 吗？ 还是因为我的组件结构？ （我有多个模块）

我想知道如何将它缩短到 3 - 5 秒，因为它会极大地影响我的工作效率。

谢谢

这是捆绑包的大小：

这是我的管理模块路由：

Answer 1

我读过的最好的文章，可以提高我的 Angular 应用程序在开发和生产开发中的性能。

Angular Performance Tips Article

个人提示：

RxJS v6 和 Webpack v4

Answer 2

这个答案有几个部分是我们从评论和聊天中得出的，在这里添加一个摘要答案。

快速感谢 link ，它是人们开始和熟悉 Angular 性能的好地方。

首先，我们将解决实时重新加载（构建更新）缓慢的问题。尝试制作更小的模块。这将允许重建一次使用更少的代码。更改模块后，需要重新构建，模块越大，重建时间可能越长。虽然这不是事实或标准，但只要我可以在项目上设置预算，尽量将我的模块保持在 200kb 以下（vendor 和 initial 除外）。有了它，我通常有非常可接受的重建时间 :)

加载时间长似乎部分与 bootstrap 在多个地方导入有关。将其精简为适当的 imports/mixins 应该可以缓解一些这种情况。另一个有帮助的重构是拆分模块以进行延迟加载。 Admin 模块相当大，甚至可以拆分为多个管理模块（每个模块都导入了共享的管理功能）。 "shared features" 建议在 Angular material2 repository which has each module import basically what it needs to operate. If you're still having issues with lazy loaded modules being too large, you can specify non child route modules to be lazy loaded 中也很好地建模（就像一个大的 "shared feature" 模块）。