Webpack 5 给 Angular 12 带来了什么好处? [英] What benefits does Webpack 5 bring to Angular 12?

问题描述

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

I updated to Angular 12 yesterday which uses Webpack 5.

发行说明博客 说:

在 v11 更新中，我们添加了对 Webpack 5 的实验性支持.今天，我们很高兴地宣布，我们正在发布准备就绪的产品Angular 支持的 Webpack 5 版本.

In the v11 update we added experimental support for Webpack 5. Today, we’re happy to announce that we’re releasing a production ready version of Webpack 5 support in Angular.

我想知道 Webpack 5 中有哪些具体可以改进我的 Angular 项目.

I'd like to know what specifically in Webpack 5 can improve my Angular project.

不幸的是，在 Windows 上运行我看到 ng serve 的构建时间要长得多，从大约 70 秒到 106 秒.构建时间要长得多(是的，我正在使用增量构建，但第一次构建非常重要)而且我也没有看到包大小有任何减少.

Unfortunately running on Windows I'm seeing much longer build times for ng serve from around 70 seconds to 106 seconds. The build time is much longer (and yes I'm using incremental builds but that first build is very important) and I'm also not seeing any reduction in bundle sizes.

我相信 sass 编译器可能对我看到的时间增加负有部分责任.事实上，使用 speed-measure-webpack-plugin 我能够看到很多时间致力于 sass-loader.我可以在 webpack 配置中更改任何插件来帮助缓存 sass、使用不同的 sass 加载、编译器或类似的东西吗?我正在使用 @angular-builders/custom-webpack 包让我添加插件.

I believe that the sass compiler could be partly responsible for the increased times I'm seeing. In fact using the speed-measure-webpack-plugin I was able to see a lot of time dedicated to sass-loader. Are there any plugins I can change in webpack config to help cache the sass, use a different sass loaded, compiler or something like that? I am using the @angular-builders/custom-webpack package which lets me add plugins.

Webpack 发行说明让我很兴奋，而且似乎有一个提高构建性能的潜力，但不幸的是我还没有用 Angular 看到它，我得到了更糟糕的结果.

The Webpack release notes get me excited, and it seems there's a lot of potential for improving build performance but unfortunately I have yet to see it with Angular and I'm getting worse results.

推荐答案

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

I understand the build time is increased for you with webpack 5. But if we talk about benefits, Angular has much to offer with webpack 5 and one of them is in terms of modularization using module federation. Webpack 5 is having an important feature of loading remote angular modules and stitching it with angular application at run time and that too without violating rules of zone.js. Its totally a game changer in javascript world. You can read more about it at Module Federation with Webpack 5. With this you can split your codebase with smaller bundle size and during runtime you can dynamically load them on demand, resulting in faster and independent deployments and maintainability.

这篇关于Webpack 5 给 Angular 12 带来了什么好处?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！