Question

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

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

在angular.json中设置es5browsersupport: false，并出现错误。
从浏览器列表中排除Chrome 41，IE 9-11和ie_mob 11。

Answer 1

在Angular 8中，文件浏览器列表必须位于项目根文件夹中。我的项目需要以下条目才能禁用差异加载：

response

Answer 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

Answer 3

可以在下面的env变量中添加以禁用差异加载功能。以下适用于Windows

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

对于Mac

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

Answer 4

尝试将tsconfig.json的目标从es2015改回es5，这将禁用差异加载。

Answer 5

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

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

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

要明确禁用差异加载：


通过删除浏览器列表配置文件中的not关键字，在浏览器列表配置文件中启用无效浏览器或IE浏览器。

在compileOptions中将目标设置为es5。

Answer 6

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

在浏览器列表中进行如下设置，以使build-angular中的isEs5SupportNeeded为假。

> 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

Answer 7

通过尝试自动提供支持，他们使其变得异常复杂。我只想支持es2018，仅此而已。对于我的内部Web应用程序，无论我在tsconfig和browerlist中放什么内容，最终都会得到2套文件。

这是坏的，即使不是问我也没想到。差异负载应该可以通过类似以下的开关来控制：

differentialMode：已禁用|已启用|浏览器列表

Answer 8

当前，由于@ angular / cli认为最新的Edge（即Edge 18）不符合es2015-modules规范，因此产生了es5捆绑包：https://github.com/angular/angular-cli/issues/14580。

~~一个肮脏的解决方法是将Edge从您支持的浏览器列表中排除（在browserslist文件中。）~~如果您升级到@ angular / cli 8.1，则应解决此问题。 0。

Answer 9

我可以通过在package.json中添加“ browserslist”键来使用Angular 8.1.1解决我的项目。（位于顶层，与“名称”，“依赖项”等相同）。

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

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

Answer 10

在tsconfig.json中设置

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

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

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

Answer 11

简单

> 5.0%
last 1 edge versions

会做

Answer 12

只需在 .browserslistrc 中指定

supports es6-module

Answer 13

对于 2021 年的答案（Angular 11 - 12.1.1）我的 package.json 文件中的这个浏览器列表停止构建 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 v8中关闭差分加载？

13 个答案: