正如摘要所述，Angular 13 引入了构建流程的优化，其中最显著的变化之一就是默认情况下不再生成单独的 main-es2015.js 文件。 让我们深入了解一下。
Angular 13 的差分加载机制
在 Angular 13 之前，Angular CLI 会生成多个 JavaScript 包，以支持不同的浏览器环境。这被称为“差分加载”，旨在为现代浏览器提供更小、更高效的 ES2015+ 代码，同时为旧版浏览器提供兼容的 ES5 代码。
然而，Angular 团队发现，绝大多数现代浏览器已经支持 ES2015+ 特性。因此，为旧版浏览器生成单独的 ES5 包所带来的好处已经不再明显，反而增加了构建时间和复杂性。
为什么 main-es2015.js 消失了？
Angular 13 默认只生成 main.js 文件，不再区分 main-es5.js 或 main-es2015.js。这是因为现代浏览器已经足够普及，不再需要单独维护 ES5 版本。
tsconfig.json 中的 target 和 module 配置仍然有效，但它们的影响已经发生了变化。
- target: "es2015" 或更高版本：Angular CLI 会生成 ES2015+ 代码，并将其打包到 main.js 中。
- module: "esnext" 或其他模块格式：Angular CLI 会使用指定的模块格式来组织代码。
如何处理旧版浏览器支持？
如果你的应用仍然需要支持非常旧的浏览器，可以考虑以下方法：
-
Polyfills: 使用 polyfills 来为旧版浏览器提供缺失的 JavaScript 特性。可以在 src/polyfills.ts 文件中导入所需的 polyfills。
import 'core-js/es/promise'; // For IE 11 import 'core-js/es/array'; // For IE 11
-
browserslist 配置: 使用 browserslist 文件（通常位于项目根目录）来指定目标浏览器。Angular CLI 会根据 browserslist 配置自动应用必要的转换和 polyfills。
# .browserslistrc > 0.5% last 2 versions not dead IE 11 # Include IE 11 support
手动构建 ES5 版本 (不推荐): 虽然不推荐，但仍然可以通过修改 angular.json 和 tsconfig.json 来手动配置 ES5 构建。 这通常涉及创建单独的构建配置，并使用不同的 TypeScript 编译器选项。 这种方法会显著增加构建时间和维护成本。
总结
Angular 13 移除 main-es2015.js 文件是构建优化的重要一步。它简化了构建流程，缩短了构建时间，并减少了不必要的代码冗余。 如果你需要支持旧版浏览器，请使用 polyfills 和 browserslist 配置来确保兼容性。 尽量避免手动构建 ES5 版本，因为它会增加复杂性和维护成本。 理解这些变化将帮助你更好地构建和维护 Angular 13 应用。
