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版本说明让我兴奋，似乎有一个用于提高构建性能很大的潜力，但不幸的是，我还没有跟角度看它，我得到更坏的结果。

Answer 1

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