我的应用程序构建服务缓慢的可能原因是什么？

Question

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

我的当前ng服务在大约20秒内对文件中的简单文本进行更改后运行更新。 （实际上，编译时间很短，在3-5秒内），其余15秒是浏览器重新加载的过程。我在“网络”标签中意识到，耗时最长的过程是websocket，而这花费了13秒。

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

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

谢谢

这是捆绑包的大小：

这是我的管理模块路线：

Answer 1

我们从评论和聊天中获得了该答案的一部分，并在此处添加了摘要答案。

感谢link from @ISanchez，在这里人们可以开始并熟悉Angular的性能。

首先，我们将解决实时重新加载（构建更新）缓慢的问题。尝试制作更小的模块。这样可以使重建一次使用更少的代码。更换模块后，需要重新构建，如果模块更大，则可能需要更长的时间。尽管这不是事实或标准，但我可以在项目上尽可能地设置预算，以尝试将模块保持在200kb以下（供应商和初始的除外）。这样，我通常会有极其可接受的重建时间：）

较长的加载时间似乎与在多个位置导入的所有引导程序部分相关。将其减少到适当的import / mixins应该可以减轻这种情况。另一个有助于解决问题的重构是将模块拆分为延迟加载。管理模块相当大，甚至可以拆分为多个管理模块（每个模块都导入了共享管理功能）。在Angular material2 repository中很好地建模了“共享功能”建议，该建议使每个模块基本上都导入了需要操作的模块。如果仍然存在延迟加载的模块太大的问题，则也可以指定non child route modules to be lazy loaded（例如大型“共享功能”模块）。

Answer 2

我阅读的有关提高Angular应用程序开发和产品开发性能的最佳文章。

Angular Performance Tips Article

个人提示：

RxJS v6和Webpack v4