Webpack 5 给 Angular 12 带来了什么好处？

Question

我昨天更新到使用 Webpack 5 的 Angular 12。

release notes blog 说：

在 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 release notes 让我兴奋不已，似乎有一个 lot of potential for improving build performance，但不幸的是我还没有在 Angular 中看到它，而且我的结果越来越差。

Answer 1

您可以在此线程中找到一些信息：https://github.com/angular/angular-cli/issues/20792

最初，v12 有性能下降：

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

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

Answer 2

我知道 webpack 5 为您增加了构建时间。但是如果我们谈论好处，Angular 可以为 webpack 5 提供很多东西，其中之一就是使用模块联合进行模块化。 Webpack 5 有一个重要的特性是加载远程 Angular 模块并在运行时将其与 Angular 应用程序拼接起来，这也不会违反 zone.js 的规则。它完全改变了 javascript 世界的游戏规则。您可以在Module Federation with Webpack 5 阅读有关它的更多信息。有了这个，您可以将代码库拆分为更小的包大小，并且在运行时您可以按需动态加载它们，从而实现更快、独立的部署和可维护性。