10

我昨天更新到使用 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 的结果，而且结果更糟。

4

2 回答 2

5

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

于 2021-07-09T11:52:20.050 回答
2

您可以在此线程中找到一些信息：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 环境变量。

于 2021-07-10T15:09:49.353 回答