听说使用 Angular 17 的新建构系统可以使构建速度提高100倍，所以我尝试了一下
上个月发布了 Angular 的新版本，即 Angular 17。
在功能方面，添加了新的代码流程和构建系统，在 Signal 方面也得到了稳定版本的更新，有着重大的进步。
此外，还有大量的品牌改变，包括标志的变更和新的文档站点，该站点配备了能运行 Angular 的沙盒功能等。
听说 Angular 17 的新构建系统非常快，我实际验证了一下。
有很多不同的 Angular 构建系统。
Angular有多个构建器，包括用于客户端渲染（CSR）和服务器端渲染（SSR）的选项。
角度开发工具的构建器
Angular 14から追加され、長らく開発者プレビューだった@angular-devkit/build-angular:applicationesbuildで動作するCSRとSSR用のビルダー
Angular 17から追加され、CSRとSSRの両方で使える
Angular 17 からはこれがデフォルトになる@angular-devkit/build-angular:ng-packagrAngular Package Formatに準拠したAngularライブラリ用のビルダー
在这些选项中，browser-esbuild和application中使用了esbuild，而其他选项使用了webpack。
以前只能在CSR构建中使用esbuild，但是使用Angular 17新增的application构建器，现在可以在SSR构建中使用esbuild。
从现在开始，这个构建工具将成为Angular的默认工具（但似乎并不意味着传统的webpack构建将被淘汰）。
因为从webpack切换到esbuild，构建时间大幅缩短。
简单地解释两者的区别是，
webpack 是什么
webpack 是一款将多个 JavaScript 文件合并成一个文件并输出的工具。
在客户端开发中，它是最著名的模块打包工具之一。
长期以来，它一直支持着现代前端开发。但是近年来，配置文件的复杂性和性能问题成为了它的瓶颈，其他模块打包工具正在夺取它的市场份额。
esbuild 是什么
一个与webpack相同的模块捆绑器之一。
由Go语言编写，因此具有高速运行的特点。
根据官方描述，据说比webpack快10到100倍。
在这个领域，多年来webpack一直很受欢迎。然而，由于配置文件的复杂性和性能问题，近年来出现了许多解决这些问题的新模块打包工具。
esbuild 是其中之一。
关于 esbuild 速度的秘密在许多网站上有详细解释，请参考那里。
@angular-devkit/build-angular：如何使用该应用程序
现在，esbuild已经成为Angular 17的标准选项。
但是，要在现有系统中使用新的构建系统，需要进行一些步骤。
我们一边确认步骤，一边进行与传统建筑商的性能验证。
顺便提一下，所需的步骤已在官方文件中记录。
前提：需要是 Angular 17 或以上的版本。
首先，让我们升级至Angular 17。
操作步骤
1. 修改 angular.json 中的 builder
用中文表达的话，可以说：
这个。
...
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
...
这样做
...
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:application",
...
2. 改变构建目标选项
我会修改 angular.json 中的构建目标选项的以下参数。
main を browser に変更する。
polyfillsを単一のファイルではなく、配列にする。
buildOptimizerを削除する。
resourcesOutputPathを削除する。
vendorChunkを削除する。
commonChunkを削除する。
deployUrl を削除する。代わりに を使用する。詳細は公式のデプロイメントドキュメントを参照。
ngswConfigPath を serviceWorker に変更する。
3. 建造
现在可以像以前一样使用 ng build 进行构建。
尝试实际建立后的结果
虽然没有达到原先的100倍，但是在没有缓存的情况下，首次构建的时间大幅缩短了。从第二次开始，由于有缓存的作用，结果与webpack并没有太大差别。另外，构建的大小也没有太大变化。
总结
这次的加速主要是因为从webpack切换到esbuild的原因。
因此，如果您已经使用@angular-devkit/build-angular:browser-esbuild，请将其更改为@angular-devkit/build-angular:application，但速度可能不会提升到这个程度。
如果您正在使用webpack或在SSR中进行构建，强烈建议您升级到Angular 17，效果会非常显著。
