如何加速Angular 6构建？

我有一个相当大的Angular 6项目，大约有100个顶级（完整页面）组件，还有一堆较小的控制组件（用于按钮、表单等）。对于提前编译，页面重新加载非常快（<2秒）。但是，初始的

ng-serve--aot

需要30秒以上的时间，文件更改导致的每次后续重新编译都需要约15秒，即使是最微小的更改也是如此

有没有办法使编译或至少重新编译更快？似乎angular正在重新编译整个项目，但只更改了一小部分

---

模块化项目使组件延迟加载会影响构建时间吗？还是纯粹为了页面加载时间（编译完成后）？

对于开发，建议只使用

ngserve

。如果添加

--aot

参数，则在构建时将html模板和样式转换为javasctipt需要更多的时间，但这种转换可以通过jit编译在浏览器端动态完成，因此只需删除

--aot

参数即可节省大量构建时间

如果您的项目非常大，建议将其拆分为几个

NgModules

，并按需使用延迟加载加载。当您更改项目中的任何内容时，angular cli将只编译包含更改的

NgModule

，因此split project也将节省构建时间

---

现在，angular将在您更改代码时重新加载整个页面，如果您希望部分重新加载，您可以尝试，但hmr可能会对您在项目中使用的库产生功能问题。

这通常取决于您在这里讨论的构建。有一些构建可以部署到生产环境中。对于那些人，我想它几乎是一个标准，使用

--prod

标志和

ng build

来进行所有优化，比如树抖动以消除死代码。这就是您的捆绑包大小如何得到高度优化，并且比普通捆绑包小。现在你真的不能做太多，因为它需要花费所有的时间来对你的包执行优化

<>如果你关注在开发过程中的小改动后为你的应用程序服务，请考虑实现热模块替换。它可以为您节省大量构建应用程序的时间

另外，因为它只适用于开发环境，而不适用于生产环境，所以我并不认为您会有任何损失

而且，它不是非官方的。这是现在的标准。甚至StackBlitz也使用它。不相信我？你自己看看：

我想你应该试一试。以后你会感谢我的

下面是一个关于如何实现它的示例—一个Angular应用程序，可以帮助您在几分钟内实现HMR。

您可以尝试添加

--source map=false

如

ng serve --source-map=false

---

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

尝试HotModuleReplacement导入多少个外部模块？你的包裹有多大？你有SSD吗？问题是，如果没有AOT，它只会节省构建/编译的几秒钟时间，但它会为页面重新加载增加大约10秒钟，因此这是一个净损失。我还没有完成angular组件的模块化，它对编译和运行时都有帮助吗，还是只对运行时有帮助？我现在不喜欢像hmr这样的非官方方法（我对web开发人员太陌生了，无法理解它）。是的，它通过模块化应用程序来帮助编译和运行。