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.
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.
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.
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With