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

Question

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

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

• es5browsersupport: false在angular.json中设置，并得到错误。
• 从browserList中排除Chrome 41，IE 9-11和ie_mob 11。

Answer 1

这些答案中没有一个对我有用@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 2

在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

Answer 3

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

在 browserList 中设置如下以isEs5SupportNeeded在build-angular 中设置为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

Answer 4

最快的解决方案：切换回es5作为tsconfig.json.

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

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

要显式禁用差异加载：

• 通过删除它们前面的 not 关键字，在 browserslist 配置文件中启用死浏览器或 IE 浏览器。
• 将 compilerOptions 中的目标设置为 es5。

Answer 5

只需在 .browserslistrc 中指定

supports es6-module

Answer 6

通过在package.json. （置于顶层，同“name”、“dependencies”等）

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

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

Answer 7

对于 2021 年的答案 (Angular 11 - 12.1.1)\n我的 package.json 文件中的此浏览器列表停止构建ES5捆绑包。

\n

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

\n

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

\n

\n

在您的项目目录中运行npx browserslist以查看您的项目\xe2\x80\x99s\n目标浏览器。

\n

此 CLI 工具是内置的，可在任何带有 Autoprefixer 的项目中使用。

\n

\n

正如您所看到的，放弃过时的浏览器有巨大的优势。

\n

Initial ES5 Total | 1.12 MB \nInitial ES2020 Total | 960.50 kB\n

\n