Production compilation with ejected Angular 4 application produces large files

Question

ng build --prod Angular CLI command produces highly compressed javascript files in Angular4 application.

When the application is ejected using ng eject command, Angular CLI commands are gone and we are left with npm scripts( npm run build command to build the app), but unfortunately that command outputs a non-production build.

I tried running webpack -p command directly but the output result files are slightly larger compared to the output of ng build --prod command.

How to get a compression equivalent of ng build --prod command but on an ejected application? What command/arguments can produce such results?

Answer 1

You can eject the production version of the webpack config by using the following command:

ng eject --prod

EDIT

If you want to use both the development & production versions of the ejected webpack config, do the following:

1. Backup your existing package.json

2. Execute ng eject --prod (this will eject the production version of webpack config)

3. Rename the ejected webpack.config.json to webpack.config-prod.json

4. Restore your backed up package.json (the actual changes are pretty much the scripts and few new packages). You might also want to edit your .angular-cli.json and change the ejected property to false.
5. Execute ng eject (this will eject the development version).

You're now left with a production & development version of your webpack configs. Now, to compile your Angular project for production, execute webpack --config webpack.config-prod.js and you can also add this to your package.json scripts for ease.

However, this may not be the perfect method for this but this is what I did in the. If there's a better version, feel free to edit.