angular - 开发和生产的不同浏览器列表？

Question

我要激活Differential Loading仅在生产版本中。原因是我不希望开发构建花费太长时间。

由于差异加载源自浏览器列表内容，我想为每个构建配置不同的浏览器列表。

这是开发人员的浏览器列表:

> 0.5%
last 2 versions
Firefox ESR
not dead
not IE 9-11

这是产品:

> 0.5%
last 2 versions
Firefox ESR
not dead
not IE 9-11

我使用这些命令激活我的开发和生产构建:

开发:构建

产品:ng build --prod

相当标准。

Answer 1

如果我理解正确，那么更改 angular.json 中的构建配置应该可以解决问题。您可以使用 environment.ts 文件复制 Angular 默认执行的操作。

因此，在 angular.json 中的 build.configurations.production 下，您可以添加到 fileReplacements 数组:

"fileReplacements": [
   {
     "replace": "src/environments/environment.ts",
     "with": "src/environments/environment.prod.ts"
   },
   {
     "replace": "src/.browserslistrc",
     "with": "src/.browserslistrc.prod"
   }
],

这些文件名是假定的，但您显然可以用您需要的任何名称替换。

编辑

我不完全确定这是否有效或如何测试它。根据 browserslist 文档，您还可以使用环境标志 https://github.com/browserslist/browserslist#configuring-for-different-environments

对于 Angular，这看起来像下面这样:

[development]
> 0.5%
last 2 versions
Firefox ESR
not dead
not IE 9-11

[production]
> 0.5%
last 2 versions
Firefox ESR
not dead
not IE 9-11

这应该可以使用 NODE_ENV ，当使用 ng serve (以及 ng build) 和 production 使用 ng build --prod