Angular 13 升级后，默认情况下构建过程只会生成 main.js 文件，不再单独生成 main-es2015.js 文件。这是由于 Angular 13 优化了差分加载机制，旨在提高构建速度。本文将解释这一变化的原因，并提供相应的处理方法。
Angular 13 中的差分加载优化
在 Angular 13 之前，构建过程通常会生成多个 JavaScript 文件，如 main.js (ES5 版本) 和 main-es2015.js (ES2015+ 版本)。 这种差分加载机制允许浏览器根据其支持的 JavaScript 版本加载不同的文件，从而提高应用程序的性能。
然而，Angular 13 对差分加载进行了优化。 默认情况下，Angular CLI 现在只会生成 main.js 文件，该文件包含了现代 JavaScript 语法 (ES2015+)。 这是因为现代浏览器对 ES2015+ 的支持已经非常广泛，不再需要单独的 ES5 版本。
如何处理缺失 main-es2015.js 文件的情况
如果您在升级到 Angular 13 后发现缺失 main-es2015.js 文件，并且需要兼容旧版本浏览器，可以考虑以下方法：
检查浏览器兼容性： 首先，确认您的目标浏览器是否支持 ES2015+。如果您的目标浏览器都是现代浏览器，则无需进行任何更改。
-
使用 @angular-devkit/build-angular:browser 构建器： 确保您的 angular.json 文件中使用的是 @angular-devkit/build-angular:browser 构建器。这是 Angular 官方推荐的构建器，它会自动处理差分加载。
{ "projects": { "your-project": { "architect": { "build": { "builder": "@angular-devkit/build-angular:browser", "options": { // ... } } } } } } -
配置 browserslist： browserslist 文件用于指定应用程序支持的目标浏览器。 Angular CLI 会根据 browserslist 的配置来生成相应的 JavaScript 代码。 您可以通过在项目的根目录下创建一个 .browserslistrc 文件或在 package.json 文件中添加 browserslist 字段来配置 browserslist。
-
.browserslistrc 文件示例：
> 0.5% last 2 versions not dead
-
package.json 文件示例：
{ "name": "your-project", // ... "browserslist": [ "> 0.5%", "last 2 versions", "not dead" ] }
如果需要支持更旧的浏览器，请确保 browserslist 配置中包含这些浏览器。 Angular CLI 会根据 browserslist 的配置自动生成兼容的代码。
-
-
启用 ES5 构建 (不推荐)： 如果您必须生成 ES5 版本的代码，可以在 angular.json 文件中配置 target 选项为 "es5"。 但是，强烈建议不要这样做，因为它会显著增加构建时间和代码体积。 只有在极少数情况下，当您需要支持非常旧的浏览器时，才应该考虑这种方法。
{ "projects": { "your-project": { "architect": { "build": { "builder": "@angular-devkit/build-angular:browser", "options": { "tsConfig": "tsconfig.json", "target": "es5" // 强烈不推荐 // ... } } } } } }
注意事项
- 升级 Angular 版本后，务必仔细阅读官方的更新日志，了解新的特性和变化。
- 定期更新您的 browserslist 配置，以确保您的应用程序支持最新的浏览器版本。
- 尽量避免生成 ES5 版本的代码，因为它会显著降低应用程序的性能。
总结
Angular 13 优化了差分加载机制，默认情况下只会生成 main.js 文件。 这有助于提高构建速度，并减少代码体积。 如果您需要支持旧版本浏览器，可以通过配置 browserslist 来实现。 但是，强烈建议尽可能使用现代浏览器，并避免生成 ES5 版本的代码。
