Angular CLI 11 同时输出ES5与ES2018构建产物的配置咨询

基础信息 #

• 运行环境：Angular CLI 11.0.3、Angular 11.0.3，操作系统为Mac OS
• 项目背景：经过多年持续升级，当前已采用Angular 11.0.3版本，执行构建操作时会同时生成ES5和ES2018两套输出产物
  

当前配置 #

tsconfig.json 配置如下：

{
  "compileOnSave": false,
  "compilerOptions": {
    "module": "es2020",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es2018",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "strictTemplates": true
  }
}

构建生成的index.html会同时引用两套构建对应的脚本，具体内容如下：

<script src="runtime-es2018.681bd8a4edb177c86959.js" type="module"></script>
<script src="runtime-es5.681bd8a4edb177c86959.js" nomodule defer></script>
<script src="polyfills-es5.b516c02b9f8eaec4ec49.js" nomodule defer></script>
<script src="polyfills-es2018.ba78947c8b103ff9cbd4.js" type="module"></script>
<script src="main-es2018.2470cef227bbd6721f1b.js" type="module"></script>
<script src="main-es5.2470cef227bbd6721f1b.js" nomodule defer></script>

提问点 #

• 这种双版本构建输出模式是否确有必要、是否必须同时保留两套构建产物？
• 如果不需要双版本输出，应当如何调整配置，实现仅生成单一版本的构建产物？

对应解答 #

双版本构建的必要性判断 #

这种双构建是Angular 11默认开启的*差异化加载（Differential Loading）*特性，设计初衷是：

• 现代浏览器（支持type="module"属性的版本）加载更小的ES2015+语法产物，减少包体积，提升加载速度
• 不支持ES Module的老旧浏览器（如IE11、旧版Edge/Safari）自动加载经过降级的ES5产物和对应polyfill，保证页面可正常运行

是否需要保留双构建完全取决于你的浏览器兼容范围：

• 如果你需要兼容IE11及以下、或是其他不支持ES Module的老旧浏览器，双构建是必要的，强行关闭会导致这类用户打开页面时报错
• 如果你当前的业务用户群完全不使用上述老旧浏览器，双构建就没有保留的必要，还会额外增加构建时间和产物体积

单版本构建的配置调整方法 #

如果确认不需要兼容老旧浏览器，按照以下步骤操作即可关闭双构建，仅生成单版本ES2018产物：

1. 打开项目根目录下的angular.json文件
2. 定位到当前项目的构建配置节点，路径一般为：projects -> 你的项目名 -> architect -> build -> options
3. 在该options节点下新增或修改属性es5BrowserSupport，将其值设为false
4. 重新执行生产构建命令即可，此时输出产物只会包含一套ES2018的脚本，index.html也只会引用现代浏览器对应的资源

如果你的需求是仅适配老旧浏览器、只生成ES5产物，可以先将tsconfig.json中的target字段修改为es5，再按上述步骤将es5BrowserSupport设为false即可，这类场景目前比较少见。

补充说明：你当前的tsconfig.json中target已设为es2018、module设为es2020，无需额外修改即可正常生成对应单版本产物。构建输出的文件名也不会再带有ES版本后缀，产物体积会相比双构建明显减小（减少幅度取决于项目依赖情况）。如果后续需要兼容老浏览器再将es5BrowserSupport改回true即可恢复双构建模式。

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