Angular 13 构建输出解析：差分加载机制的演进与影响

Angular 13 对其构建过程中的差分加载机制进行了重要更新。默认情况下，ng build 命令现在仅生成一个 main.js 文件，不再单独输出 main-es2015.js 或 main-es5.js。这一变化旨在简化构建输出、提升构建速度，并更好地适应现代浏览器环境，是Angular团队针对前端生态演进做出的优化。

理解Angular差分加载的演进

在angular 13之前的版本中，为了优化应用程序在不同浏览器上的性能和兼容性，angular引入了“差分加载”（differential loading）机制。其核心思想是根据浏览器对javascript语言标准的支持程度，生成并提供不同版本的javascript包。

通常，这意味着会生成两个主要的应用程序包：

• main-es5.js: 针对旧版浏览器（如IE11），编译为ES5（ECMAScript 2015之前的版本），以确保广泛的兼容性。
• main-es2015.js (或更高版本，如main-es2017.js)：针对现代浏览器，编译为ES2015（或更高版本），利用新的语言特性和优化，生成更小、执行更快的代码。

在HTML文件中，通过 <script type=”module”> 和 <script nomodule> 标签，浏览器会自动选择加载适合自身的JavaScript包。

Angular 13 的变革：构建输出的简化

随着Web技术的飞速发展，现代浏览器对ES2017及更高版本JavaScript标准的支持已非常普及。IE11等旧版浏览器市场份额持续萎缩，甚至已被微软官方终止支持。鉴于这一趋势，Angular团队在版本13中对差分加载的行为进行了重大调整。

从Angular 13开始，ng build 命令在默认情况下将不再生成单独的main-es5.js或main-es2015.js文件。取而代之的是，构建过程将只生成一个main.js文件。这个单一的main.js文件将根据项目的tsconfig.json中target字段的配置（Angular 13默认是es2017），编译成适合现代浏览器的JavaScript代码。

例如，如果您的tsconfig.json配置如下：

{
"compilerOptions": {
"target": "es2015",
"module": "esnext",
// ... 其他配置
},
// ...
}

即使target设置为es2015，在Angular 13中，构建输出依然只会有一个main.js文件。这个文件将符合ES2015标准，并针对现代浏览器进行优化。

这一变化带来的影响与优势

1. 更快的构建速度: 编译器不再需要生成和处理多个不同版本的JavaScript包，从而显著缩短了构建时间，提高了开发效率。
2. 简化的构建输出: dist目录下的文件结构更加清晰，不再有多个相似的main文件，便于管理和部署。
3. 适应现代Web标准: 这一调整与当前浏览器生态系统保持同步，将重心放在了支持ES2017+的现代浏览器上，确保应用程序能够充分利用最新的Web技术。
4. 潜在的包大小优化: 尽管可能不再有ES5版本，但对于现代浏览器而言，单一的、优化过的ES2017+包通常已经足够高效。

注意事项

• 向后兼容性: 如果您的项目仍然需要支持IE11或其他不支持ES2017+的旧版浏览器，升级到Angular 13后，您可能需要考虑其他兼容性方案，或者在项目早期就明确不支持这些旧版浏览器。
• tsconfig.json配置: tsconfig.json中的target配置仍然决定了TypeScript代码被编译成的JavaScript语言标准。例如，如果设置为es2015，那么生成的main.js将是ES2015兼容的。但请注意，这不再影响是否生成多个差分加载文件。
• 构建标志: 尝试启用aot (Ahead-of-Time compilation) 或 vendorChunk 等标志并不能改变Angular 13差分加载的默认行为。这些标志控制的是其他构建优化方面，与生成多少个main文件无关。aot是默认开启且推荐的，vendorChunk则控制是否将第三方库单独打包。

总结

Angular 13中差分加载机制的更新是一项重要的优化，它反映了前端技术栈的演进和现代浏览器环境的成熟。对于大多数新项目和已升级的项目而言，这意味着更快的构建速度和更简洁的输出。开发者应理解这一变化，并根据项目的目标浏览器支持范围来评估其影响。通过拥抱这一变化，我们可以更好地利用Angular提供的现代化开发体验。