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

【问题标题】：What are the possible causes for my application having slow built on ng serve?我的应用程序在 ng serve 上构建缓慢的可能原因是什么？
【发布时间】：2019-02-05 18:14:58
【问题描述】：

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

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

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

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

谢谢

这是捆绑包大小：

这是我的管理模块路线：

【问题讨论】：

您能否提供更多信息，例如您的构建输出（包大小）？外部库是通过 npm 安装的，它们可能不是问题。在每个 css 文件中导入 bootstrap 可能会导致问题。stackoverflow.com/a/47054257/10747134 应该是您需要导入 bootstrap css 的唯一地方
在我们看到您的angular.json 设置、您导入的模块、package.json 之前，很难预测。
@OneLunchMan：在这里我附上了我的捆绑输出。我会尝试将引导程序移动到一个地方。看看能不能解决问题
我没有修改任何 angular.json 和 package.json。它与最新的 Angular 7.2 @Sandy 相同
你在延迟加载吗？我觉得 > 2MB 的功能模块代码（管理模块）在笨重的一面。你的路线是什么样的？

标签： angular angular-cli angular7 angular-cli-v7

【解决方案1】：

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

非常感谢link from @ISanchez，这是人们开始和熟悉 Angular 性能的好地方。

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

较长的加载时间似乎与在多个地方导入所有引导程序有关。将其缩小到适当的导入/混合应该可以缓解其中的一些问题。另一个有帮助的重构是将模块拆分为延迟加载。管理模块相当大，甚至可以分成多个管理模块（每个管理模块都导入共享的管理功能）。 “共享功能”建议在Angular material2 repository 中得到了很好的建模，每个模块基本上都导入了它需要操作的内容。如果您仍然遇到延迟加载模块太大的问题，您也可以指定non child route modules to be lazy loaded（如大型“共享功能”模块）。

【讨论】：

【解决方案2】：

我阅读的最好的文章，用于提高我的 Angular 应用程序在开发和产品开发方面的性能。

Angular Performance Tips Article

个人提示：

RxJS v6 和 Webpack v4

【讨论】：

"我没有修改任何 angular.json 和 package.json。它与最新的 angular 7.2" rxjs 6+ 和 webpack 4+ 默认相同。
这是我的一些建议，你应该看看那里，为你们俩找到合适的解决方案。有了这些信息，我无法告诉你它有什么问题。对不起。