基于Webpack的Angular构建器：JavaScriptOptimizerPlugin的define配置

一、JavaScriptOptimizerPlugin中配置define的方法 #

要在Angular内置的JavaScriptOptimizerPlugin中配置define，直接修改项目根目录的angular.json即可。该配置会直接传递给底层的esbuild优化器，帮助实现Tree Shaking和代码压缩：

{
  "projects": {
    "你的项目名称": {
      "architect": {
        "build": {
          "options": {
            "optimization": {
              "scripts": {
                "define": {
                  "process.env.NODE_ENV": "\"production\"",
                  "自定义常量": "\"自定义值\""
                }
              },
              "styles": true,
              "fonts": true
            }
          }
        }
      }
    }
  }
}

define的作用是替换代码中的全局常量，比如把process.env.NODE_ENV替换为"production"，这样esbuild就能识别并移除仅在开发环境下执行的代码分支，实现Tree Shaking。

二、esbuild代码中define等属性的配置入口 #

你提供的optimizeWithEsbuild函数里，define、target、keepIdentifierNames等参数都来自Angular构建器的配置选项，也就是上面提到的angular.json中的optimization.scripts节点：

• define：直接对应optimization.scripts.define的配置
• target：可以在optimization.scripts中添加target: "es2020"这类配置来指定目标环境
• keepIdentifierNames：设置为true会关闭标识符压缩，对应代码中的minifyIdentifiers: !options.keepIdentifierNames

注意代码中pure: ['forwardRef']是硬编码的，若需添加更多纯函数标记，需要通过自定义构建器或扩展配置实现。

三、Angular是否允许在此处配置Tree Shaking #

完全允许。Angular在生产模式构建时默认开启Tree Shaking，而通过define配置和esbuild的优化参数，可以进一步增强Tree Shaking的效果：

• define替换全局常量后，esbuild能精准识别未使用的代码路径并移除
• pure标记告诉esbuild某些函数调用是纯函数，即使没有返回值也可以安全删除
• 生产模式下默认启用的语法压缩和标识符压缩，也会配合Tree Shaking减少最终打包体积

翻译后的esbuild优化代码 #

async function optimizeWithEsbuild(content, name, options) {
    if (!esbuild) {
        // 根据alwaysUseWasm选项创建esbuild执行器实例
        esbuild = new esbuild_executor_1.EsbuildExecutor(options.alwaysUseWasm);
    }
    try {
        return await esbuild.transform(content, {
            // 根据keepIdentifierNames决定是否压缩标识符
            minifyIdentifiers: !options.keepIdentifierNames,
            // 启用语法压缩
            minifySyntax: true,
            // 注意：禁用空格压缩是为了保留未使用的pure注解
            minifyWhitespace: false,
            // 标记为纯函数的列表，未被使用时可安全移除
            pure: ['forwardRef'],
            // 根据removeLicenses选项决定保留哪些合法注释
            legalComments: options.removeLicenses ? 'none' : 'inline',
            // 源文件名，用于生成sourcemap
            sourcefile: name,
            // 若开启sourcemap则生成外部map文件
            sourcemap: options.sourcemap && 'external',
            // 从配置中获取常量替换规则
            define: options.define,
            // 目标编译环境
            target: options.target,
        });
    }
    catch (error) {
        // 处理esbuild构建失败的情况
        if (isEsBuildFailure(error)) {
            return error;
        }
        throw error;
    }
}

内容的提问来源于stack exchange，提问作者kaixuan xu