理解Angular差分加载的演进
在angular 13之前的版本中，为了优化应用程序在不同浏览器上的性能和兼容性，angular引入了“差分加载”（differential loading）机制。其核心思想是根据浏览器对javascript语言标准的支持程度，生成并提供不同版本的javascript包。
通常，这意味着会生成两个主要的应用程序包：
- main-es5.js: 针对旧版浏览器（如IE11），编译为ES5（ECMAScript 2015之前的版本），以确保广泛的兼容性。
- main-es2015.js (或更高版本，如main-es2017.js)：针对现代浏览器，编译为ES2015（或更高版本），利用新的语言特性和优化，生成更小、执行更快的代码。
在HTML文件中，通过
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标准，并针对现代浏览器进行优化。
这一变化带来的影响与优势
- 更快的构建速度: 编译器不再需要生成和处理多个不同版本的JavaScript包，从而显著缩短了构建时间，提高了开发效率。
- 简化的构建输出: dist目录下的文件结构更加清晰，不再有多个相似的main文件，便于管理和部署。
- 适应现代Web标准: 这一调整与当前浏览器生态系统保持同步，将重心放在了支持ES2017+的现代浏览器上，确保应用程序能够充分利用最新的Web技术。
- 潜在的包大小优化: 尽管可能不再有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提供的现代化开发体验。
