Webpack 5对Angular 12带来了哪些好处？

Question

我昨天升级到了使用Webpack 5的Angular 12。发布说明博客中写道：

“在v11更新中，我们增加了对Webpack 5的实验性支持。今天，我们很高兴地宣布，在Angular中，我们发布了一个生产就绪版本的Webpack 5支持。”

我想知道Webpack 5中的具体内容如何改进我的Angular项目。不幸的是，在Windows上运行ng serve时，我看到构建时间从约70秒增加到106秒。构建时间更长了（是的，我正在使用增量构建，但第一次构建非常重要），而且我也没有看到捆绑包大小的减小。

我认为Sass编译器可能部分导致了我看到的增加的时间。实际上，使用speed-measure-webpack-plugin，我能够看到很多时间都用于sass-loader。有没有什么插件我可以在webpack配置中更改以帮助缓存sass，使用不同的sass加载器、编译器或类似的东西？我正在使用@angular-builders/custom-webpack包，它让我添加插件。 Webpack发布说明让我感到兴奋，似乎有很大的潜力来提高构建性能，但不幸的是，我还没有在Angular中看到它，而且我的结果越来越糟糕。

- Simon_Weaver

---

每个项目都可能有自己的瓶颈。也许您可以在Angular GitHub上打开一个问题，发布您配置的详细信息和分析器输出。过去，Angular团队通过这种方式帮助我们解决了构建时间问题。 - amakhrov

@amakhrov 我一直在关注一些问题。幸运的是，现在我正在开发应用程序的一个新部分，所以我只是将其他所有内容都注释掉了（在 angular.json 的副本中）。性能只是其中的一个方面 - Angular 倾向于保护我们免受 webpack 的影响，我不想错过使用新的 v5 功能实现的其他酷炫功能。 - Simon_Weaver

Answer 1

我知道使用Webpack 5会增加您的构建时间。但是，如果我们谈论收益，Angular在Webpack 5方面有很多优势之一就是使用模块联邦进行模块化。Webpack 5具有通过远程加载Angular模块并在运行时与Angular应用程序拼接的重要功能，而且不会违反zone.js的规则。它完全是JavaScript世界中的游戏规则改变者。您可以在《使用Webpack 5实现模块联邦》了解更多内容。有了这个功能，您可以将代码库分割为较小的捆绑大小，并在运行时动态地按需加载它们，从而实现更快和独立的部署和可维护性。

- Divyesh Sharma

---

你能否在Angular CLI中使用模块联邦？如果可以，请分享配置！ - Sunil Pandey

@SunilPandey 看看这个，它涵盖了所有内容。 https://www.angulararchitects.io/aktuelles/the-microfrontend-revolution-module-federation-in-webpack-5/ - Zameer Fouzan

Answer 2

您可以在此主题中找到一些信息：https://github.com/angular/angular-cli/issues/20792 最初，v12的性能有所下降：

terser-webpack插件V2仅在使用webpack 4时才会缓存到磁盘。当与webpack 5一起使用时，它使用webpack的缓存API，并且依赖于将其设置为文件系统以使第二个冷启动受益。

已发布版本12.1.0，其中包含多项性能改进。我们还引入了实验性的文件系统缓存，这应该会大大提高第二个/热启动的构建速度。您可以使用NG_PERSISTENT_BUILD_CACHE=1环境变量选择加入。

- kemsky