如何加快Angular 6的构建速度？

Question

我有一个相当大的Angular 6项目，其中包含大约100个顶级（全页）组件，以及一堆较小的控件组件（用于按钮，表单等）。通过提前编译，页面重新加载非常快（<2秒）。但是，最初的ng serve --aot会花费30秒钟以上的时间，并且即使文件更改很小，后续每次由文件更改引起的重新编译也需要15秒钟左右。

是否有一种方法可以使编译更快，或者至少重新编译更快？当只有一小部分发生变化时，Angular似乎正在重新编译整个项目。

是否将项目模块化，以便延迟加载组件会影响构建时间，还是纯粹为了页面加载时间（一旦编译）？

Answer 1

对于开发，建议仅使用ng serve。如果添加--aot参数，则在构建时需要更多时间将html模板和样式转换为javasctipt，但是可以通过jit编译在浏览器端即时完成此转换，因此只需删除{{1 }}参数将节省大量的构建时间。

如果您的项目非常大，建议将其拆分为多个--aot，然后根据需要使用延迟加载来加载它们。当您更改项目中的任何内容时，angular cli只会编译包含更改的NgModules，因此拆分项目也将节省构建时间。

现在，当您更改代码时，angular会重新加载整个页面，如果要部分重新加载，可以尝试hmr，但是hmr可能会影响项目中使用的库的功能。 / p>

Answer 2

通常取决于您在此讨论的是哪个版本。有一些您部署到生产中的版本。对于这些，我想将--prod标志与ng build一起使用几乎是一个标准，它可以进行所有优化（如“树摇”）以消除死代码。与常规捆绑包相比，这就是高度优化捆绑包大小并减小其尺寸的方式。现在，您实际上不能做太多事情，因为需要花费所有时间来对捆绑软件进行优化。

如果您担心在开发过程中进行少量更改后即可提供您的应用，请考虑实施热模块更换。它可以为您节省大量构建应用的时间。

此外，由于它仅适用于开发环境而不适用于生产环境，所以我真的认为您没有任何损失。

此外，它也不是非官方的。这些天来这是相当标准的。甚至StackBlitz也使用它。不相信我吗？亲自看看：

我认为您应该尝试一下。待会儿我会谢谢你。

这里有easy to understand article，介绍了如何实现该应用程序的Angular App，可以在几分钟内帮助您实现HMR。

Answer 3

您可以尝试添加--source-map=false，例如

ng serve --source-map=false

虽然生成的代码在调试器中可能不是超级可读的，但通常，此选项可在打开开发工具的情况下加快首次构建时间，重建时间和浏览器重新加载时间