如何在 webpack 中使用来自 Angular cli >= v16 的高级 javascript 优化（来自 @angular-devkit/build-optimizer）

Question

我们在 Angular 应用程序的 Webpack 构建中使用了

@angular-devkit/build-optimizer

link 和

@ngtools/webpack

，直到我们将脚本目标从 es5 提升到 > es2020，从 Typescript v4 提升到 Typescript v5，看起来

@angular-devkit/build-optimizer

与 Typescript v5 不兼容它不起作用，如果没有这个包，我们的包大小就会增加，因为它正确地使用 PURE 装饰器为导出的类添加前缀。

构建优化器 cli 示例： 输入 TS v5 和目标 > ES5:

export let ViewHighlightLineageAction = class ViewHighlightLineageAction extends Action {
constructor( ... ) {
... 

和优化器输出：

let ViewHighlightLineageAction = /@PURE/ (() => {
**export let** ViewHighlightLineageAction = class ViewHighlightLineageAction extends Action {
constructor( ... ) {
...

export let

内部函数有问题。

所以问题是这个包说这个功能被折叠到 cli 代码中，但我不明白如何使用它，什么可以替代这个包？

Answer 1

由于

@angular-devkit/build-optimizer

包不再与 TypeScript 5 和后 ES5 目标兼容，并且其功能已集成到 Angular CLI 中，因此您必须删除它并使用以下选项之一：

1. 使用 Angular CLI： 最简单、最直接的解决方案是使用内置的 Angular CLI 构建过程 (ng build)。默认情况下，Angular CLI 包含构建优化器功能并执行各种优化，包括添加

   @PURE

   注释、树摇动和最小化。切换到 Angular CLI 来构建应用程序将使您无需额外配置即可利用这些优化。

2. 自定义您的 Webpack 配置： 如果您需要保留自定义的 Webpack 构建过程，您可以自定义配置以实现类似的优化：

   • 使用 Angular 编译器插件： 确保您在 AOT（提前）模式下正确使用

     @ngtools/webpack Angular

     编译器插件。正确配置后，插件应执行所需的优化。

   • 集成 Babel 插件： 使用 Babel 和

     babel-plugin-annotate-pure-calls

     插件将

     @PURE

     注释添加到您的代码中。