Different browserlist for dev and prod?

user_3470148 0
Viewed 798

I want to activate Differential Loading only in production builds. The reason is that I don't want dev build to take too long.

Since Differential loading is derived from browserlist content, I'd like to configure different browserlist for each build.

This is the browserlist for dev:

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

And this for prod:

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

I activate my dev and prod build with those commands:

dev: ng build

prod: ng build --prod

Pretty standard.

angular-cli angular
1 Answers

If I understand you correctly, then changing the build config in your angular.json should do the trick. You can just copy what Angular does by default with the environment.ts file.

So under build.configurations.production in angular.json you can add to the fileReplacements array:

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

Those file names are assumed, but you can obviously substitute with whatever you need.

Edit

I'm not entirely sure if that works or how to test it. According to the browserslist docs you can also use environment flags https://github.com/browserslist/browserslist#configuring-for-different-environments

For Angular what this looks like is the following:

[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

This should work using the NODE_ENV which Angular sets as development when using ng serve (as well as ng build) and production when using ng build --prod

user_95276930
Related