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?

Oersted

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.

Proponent

the command worked. After ejecting I ran the build and minification was the way I neede it to be. But unfortunately I can't run the app in dev mode anymore. when I run npm start command, I get an error saying webpack-dev-server is not recognized as an internal or external command. So is there no way to use the ejected app in both modes (dev/prod) without cli? I'm looking for a solution to do it without any manual intervention, something out of the box solution of a kind. – Oersted

What I ended up doing was generating a non-prod and a prod version of the config using ng eject and ng eject --prod (note that you need may have to reverse your package.json after the first eject) and then using the production version of the webpack config while building for production like so: webpack --config <prod-webpack-config>. – Proponent

That is a great solution! Thanks. Please update your original answer and include what you wrote in the comment, so that's easily readable by the viewers. Sometimes people miss the comments section. – Oersted

Can I use those steps even if I already have ejected the webpack config file? – Horary