Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

ng build --prod does NOT minify / uglify / remove comments since Angular CLI 6

Since I've upgraded my Angular app to use Angular CLI version 6.x, compiling it for production (using ng build --prod, as usual) does not produce minified js. This result in very big vendor.js size (in my case is almost 10 MB).

If I open the resulting vendor.js file, I can clearly see that the code is not minified and the comments are not removed.

like image 456
Francesco Borzi Avatar asked Aug 20 '18 08:08

Francesco Borzi


People also ask

How do you minify in Angular 6?

Minification: In minification process following things are done within the js file to reduce the size of the js file for faster downloading. It removes all the white spaces within the file. It removes all the unwanted variables within the file. It converts all the big variable names to the smaller variable names.

What happens after running ng build command?

ng build is the command you use when you're ready to build your application and deploy it. The CLI will analyze the application and build the files, all while optimizing the application as best as it can.

What does -- prod do for NG build?

The –prod flag activates many optimization flags. One of them is –aot for Ahead Of Time compilation. Your component templates are compiled during the build, so TypeScript can detect more issues in your code.


1 Answers

The issue is in angular.json file.

Under the key projects.MY_PROJECT_NAME.architect.build.configurations.production, I was missing all the options that normally comes by default in the production configuration when you create a new angular project.

This is how the production configuration should look like in order to fix the issue:

"production": {
  "fileReplacements": [
    {
      "replace": "src/environments/environment.ts",
      "with": "src/environments/environment.prod.ts"
    }
  ],
  "optimization": true,
  "outputHashing": "all",
  "sourceMap": false,
  "extractCss": true,
  "namedChunks": false,
  "aot": true,
  "extractLicenses": true,
  "vendorChunk": false,
  "buildOptimizer": true
},

For some reasons, after upgrading from previous Angular CLI versions, my production configuration only had the fileReplacements key. Adding the other properties shown above (optimization, outputHashing, etc...) solved the issue for me.

like image 70
Francesco Borzi Avatar answered Oct 13 '22 19:10

Francesco Borzi