如何在 Angular v8 中关闭差分加载？答案

【问题标题】：how to turn off differential loading in Angular v8?如何在 Angular v8 中关闭差分加载？
【发布时间】：2019-05-18 09:59:11
【问题描述】：

Angular-CLI v8 实现了差异加载。但我不需要 es5 构建的文件。我想减少部署数量。

我在下面尝试过。但是 CLI 已经生成了 es5 文件。

在 angular.json 中设置es5browsersupport: false，出现错误。
从 browserList 中排除 Chrome 41、IE 9-11 和 ie_mob 11。

【问题讨论】：

给@angular/cli 的错误报告：github.com/angular/angular-cli/issues/14991

标签： angular

【解决方案1】：

在 Angular 8 中，文件 browserlist 必须位于项目根文件夹中。我的项目需要以下条目来禁用差异加载：

> 0.5%
last 2 versions
Firefox ESR
not dead
not IE 9-11
not samsung 4
not android 4.4.3-4.4.4
not last 2 ie_mob versions
not last 2 op_mini versions
not last 2 op_mob versions
not last 2 baidu versions
not last 2 kaios versions
not last 2 and_uc versions
not last 2 and_qq versions
not last 2 edge versions
not chrome 49

【讨论】：

在 Angular 8.0.1 和 not last 2 edge versions 上对我有用，因为 Edge 似乎支持 es2015。 caniuse.com/#search=es6
@Y.M.，目前，@angular/cli 不认为最新的 Edge（即 Edge 18）符合 es2015-modules：github.com/angular/angular-cli/issues/14580

【解决方案2】：

@angular/cli 8.3.8 上的这些答案都不适合我。使用npx browserslist，我可以看到列表中的浏览器比这些 StackOverflow 的最新答案要多。

为简单起见并确保不会尝试为 es5 构建差异加载，您可以将 browserslist 设置为仅使用 1 个较旧（但仍符合 es6/es2015）的浏览器版本

# we only want es2015 compliant browsers https://caniuse.com/#feat=es6
# just use one as representative for all
Chrome >= 61

【讨论】：

感谢这帮助我在 Angular 9RC 中关闭了 es5 的差分加载。我还设置了 tsconfig.json: compilerOptions:{ "target": "es2015", "lib": [ "es2017", "dom" ], }
Es5 包 startet 确实在更新到 ng12 后重新出现 - 浏览器列表或目标没有更改。所以我也采用这种解决方法。
谢谢！通过跳过“ES5 差异加载”，这将我的构建时间从 5 分钟减少了 20% 到 4 分钟或更短。 不敢相信他们没有提供一个简单的开关来关闭 ES5，而不是让我们说“我们不会支持比这更早的浏览器。”

【解决方案3】：

我在 Angular v8-rc4 中成功构建了没有 es5 文件。

在 browserList 中设置如下，以使 build-angular 中的 isEs5SupportNeeded 为 false。

> 0.5%
last 2 versions
Firefox ESR
not dead
not samsung 4
not android 4.4.3-4.4.4
not last 2 IE versions
not last 2 ie_mob versions
not last 2 op_mini versions
not last 2 op_mob versions
not last 2 baidu versions
not last 2 kaios versions
not last 2 and_uc versions
not last 2 and_qq versions
not last 2 edge versions

请参阅此列表。 https://caniuse.com/#feat=es6-module

【讨论】：

使用完全相同的列表，我仍然会生成 polyfills-es5。你用 Angular 8 final 试过了吗？
@robert，您可能有这个问题，因为目前@angular/cli 不认为最新的 Edge（即 Edge 18）符合 es2015-modules：github.com/angular/angular-cli/issues/14580。

【解决方案4】：

最快的解决方案：切换回es5 作为tsconfig.json 中的编译目标。

"compilerOptions": {
        ...
        "target": "es5"
        ...
}

如 Angular 官方文档 (https://angular.io/guide/deployment#differential-loading) 中所述：

显式禁用差异加载：

在 browserslist 配置文件中启用失效或 IE 浏览器，方法是删除它们前面的 not 关键字。

将 compilerOptions 中的目标设置为 es5。

【讨论】：

也许 OP 只想关闭 ES5 并完全切换到 ES6 (ES2015)。

【解决方案5】：

通过在package.json 中添加“browserslist”键，我能够使用 Angular 8.1.1 解决我的项目。（放在顶层，与“name”、“dependencies”等相同）

 "browserslist": [
    "last 2 Chrome versions"
  ]

这种情况适用于您只需要应用在 Chrome 中运行的特定情况。如果您需要更多浏览器兼容性，请在此处查看实施文档中的其他选项：https://www.npmjs.com/package/browserslist

【讨论】：

【解决方案6】：

对于 2021 年的答案（Angular 11 - 12.1.1）我的 package.json 文件中的这个 browserslist 停止构建 ES5 包。

在撰写本文时，符合这些描述的浏览器可以处理我的tsconfig 的构建目标。

scripts: {...
dependencies: {...
devDependencies: {...
...
"browserslist": [
    "last 5 Chrome versions",
    "last 5 ChromeAndroid versions",
    "last 3 Safari versions",
    "last 3 iOS versions",
    "last 5 Firefox versions",
    "last 5 FirefoxAndroid versions",
    "Firefox ESR",
    "last 2 Edge versions",
    "not dead"
]

在您的项目目录中运行 npx browserslist 以查看您项目的目标浏览器。

此 CLI 工具是内置的，可用于任何项目使用自动前缀。

如您所见，放弃过时的浏览器有很大的优势。

Initial ES5 Total | 1.12 MB 
Initial ES2020 Total | 960.50 kB

【讨论】：

如果您使用的代码库从 Angular tsconfig.json 和 .browserslistrc 文件后，请确保将 npm 包 browserslist 和 caniuse-lite 更新到最新版本。这将确保最新的 Angular 编译器的 is-differential-loading-required 自动检测机制与caniuse-lite 包中的最新功能定义一样工作。
只有在 Angular 12 中对我有用的东西，即将浏览器列表添加到 package.json。

【解决方案7】：

如果你想为新版本编译，在 tsconfig.json 中将 target 设置为 es2015 首先或将其设置为 es5 以禁用差异加载

"compilerOptions": {
    ...
    "target": "es2015",
    ...
}

并在 angular.json 中将 es5BrowserSupport 更改为 false

project => app => architect => build => 
"options": {
    ...
    "es5BrowserSupport": false
    ...
}

【讨论】：

此属性已在 ng 10 中删除

【解决方案8】：

只需在 .browserslistrc 中指定

supports es6-module

【讨论】：

这是唯一真正正确的答案！

【解决方案9】：

目前很多人都生成了 es5 包，因为 @angular/cli 认为最新的 Edge（即 Edge 18）不符合 es2015-modules：https://github.com/angular/angular-cli/issues/14580。

~~一个肮脏的修复是从您支持的浏览器列表中排除 Edge（在 browserslist 文件中）。~~ 如果您升级到 @angular/cli 8.1.0，这个问题应该会得到修复。

【讨论】：

【解决方案10】：

尝试将tsconfig.json 目标从es2015back 更改为es5，这将禁用差异加载。

【讨论】：

【解决方案11】：

可以添加以下环境变量以禁用差异加载功能。以下适用于 Windows

"build:prod": "set NG_BUILD_DIFFERENTIAL_FULL=true && ng build --prod",

Mac 版

"build:prod": "NG_BUILD_DIFFERENTIAL_FULL=true; ng build --prod",

【讨论】：

NG_BUILD_DIFFERENTIAL_FULL 不会禁用差异加载的构建。它改变了两个构建的构建方式。在 Angular 8.3 中，es2015 “直接降级到 ES5，而不是从头开始重建”blog.ninja-squad.com/2019/08/22/angular-cli-8.3

【解决方案12】：

简单

> 5.0%
last 1 edge versions

会做好的

【讨论】：