开发和产品的浏览器列表不同？

Question

我只想在生产版本中激活差异加载。原因是我不希望开发构建花费太长时间。

由于差异加载源自 browserlist 内容，因此我想为每个 build 配置不同的 browserlist。

这是开发者的浏览器列表：

> 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

产品：ng build --prod

相当标准。

Answer 1

如果我理解正确，那么更改你的构建配置angular.json应该可以解决问题。您只需复制 Angular 默认情况下对该environment.ts文件执行的操作即可。

因此，您可以在下面添加到数组build.configurations.production中：angular.jsonfileReplacements

"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_ENVAngulardevelopment在使用ng serve（以及ng build）和production使用时设置的ng build --prod