feat(css minimize): add CSS minification in production build for all templates. #845

New Issue

fergalmoran · 2025-08-09T17:17:53Z

fergalmoran commented

2025-08-09 17:17:53 +00:00

Originally created by @etimesg on 4/9/2017

As discussed on #844, this PR allows webpack to compress all CSS using the minimize property from the css-loader plugin. It only applies when --env.prod is provided.

Please note this will also compress any css passed through webpack, therefore you should expect a small reduction in size on files other than vendor.css. Out of curiosity, I'm posting a comparison for each template, showing all the affected files their corresponding sizes before and after this change.

Finally, I also would like to highlight the following passage from the css-loader project:

In some cases the minification is destructive to the css, so you can provide some options to it....

Although I couldn't find any errors while testing the templates, I encourage everyone to read the css-loader documentation in case of a css compression error.

Angular2Spa Template

File	css-loader	css-loader?minimize	Diff (%)
vendor.css	315kB	286kB	29kB (9.21%)
main-client.js	12.2kB	11.1kB	1.1kB (9.02%)
main-server.js	150kB	146kB	4kB (2.67%)
Total	477.2kB	443.1kB	34.1kB (7.15%)

AureliaSpa Template

File css-loader css-loader?minimize Diff (%)

vendor.css 315kB 286kB 29kB (9.21%)

app.js 26.4kB 26.1kB 0.3kB (1.14%)

Total 341.4kB 312.1kB 29.3kB (8.58%)

KnockoutSpa Template

File	css-loader	css-loader?minimize	Diff (%)
vendor.css	315kB	286kB	29kB (9.21%)
0.js	1.17kB	1.12kB	0.05kB (4.27%)
1.js	2.01kB	1.98kB	0.03kB (1.49%)
2.js	0.577kB	0.563kB	0.014kB (2.43%)
main.js	5.99kB	5.90kB	0.9kB (1.5%)
site.css	1.52kB	0.729kB	0.791kB (52%)
Total	326.2kB	296.2kB	29.9kB (9.19%)

ReactReduxSpa Template

File	css-loader	css-loader?minimize	Diff (%)
vendor.css	315kB	286kB	29kB (9.21%)
main-server.js	94.2kB	93kB	1.2kB (1.27%)
site.css	1.52kB	0.729kB	0.791kB (52%)
Total	410.7kB	379.7kB	30.9kB (7.55%)

ReactSpa Template

File css-loader css-loader?minimize Diff (%)

vendor.css 315kB 286kB 29kB (9.21%)

site.css 1.52kB 0.729kB 0.791kB (52%)

Total 316.5kB 286.7kB 29.7kB (9.41%)
VueSpa Template

File css-loader css-loader?minimize Diff (%)

vendor.css 315kB 286kB 29kB (9.21%)

main.js 21.8kB 21.6kB 0.2kB (0.9%)

Total 336.8kB 307.6kB 29.2kB (8.67%)

Please, feel free to recommend/perform any necessary modifications.

*Originally created by @etimesg on 4/9/2017* As discussed on #844, this PR allows webpack to compress all CSS using the `minimize` property from the [css-loader](https://github.com/webpack-contrib/css-loader) plugin. It only applies when `--env.prod` is provided. Please note this will also compress any css passed through webpack, therefore you should expect a small reduction in size on files other than `vendor.css`. Out of curiosity, I'm posting a comparison for each template, showing all the affected files their corresponding sizes before and after this change. Finally, I also would like to highlight the following passage from the css-loader project: > In some cases the minification is destructive to the css, so you can provide some options to it.... Although I couldn't find any errors while testing the templates, I encourage everyone to read the css-loader documentation in case of a css compression error. - **Angular2Spa Template** | File | css-loader | css-loader?minimize | Diff (%) | | --- | ---- | --- | ----| | vendor.css | 315kB | 286kB | 29kB (9.21%) | | main-client.js | 12.2kB | 11.1kB | 1.1kB (9.02%) | | main-server.js | 150kB | 146kB | 4kB (2.67%) | | *Total* | *477.2kB* | *443.1kB* | **34.1kB (7.15%)** | - **AureliaSpa Template** | File | css-loader | css-loader?minimize | Diff (%) | | --- | ---- | --- | ----| | vendor.css | 315kB | 286kB | 29kB (9.21%) | | app.js | 26.4kB | 26.1kB | 0.3kB (1.14%) | | *Total* | *341.4kB* | *312.1kB* | **29.3kB (8.58%)** | - **KnockoutSpa Template** | File | css-loader | css-loader?minimize | Diff (%) | | --- | ---- | --- | ----| | vendor.css | 315kB | 286kB | 29kB (9.21%) | | 0.js | 1.17kB | 1.12kB | 0.05kB (4.27%) | | 1.js | 2.01kB | 1.98kB | 0.03kB (1.49%) | | 2.js | 0.577kB | 0.563kB | 0.014kB (2.43%) | | main.js | 5.99kB | 5.90kB | 0.9kB (1.5%) | | site.css | 1.52kB | 0.729kB | 0.791kB (52%) | | *Total* | *326.2kB* | *296.2kB* | **29.9kB (9.19%)** | - **ReactReduxSpa Template** | File | css-loader | css-loader?minimize | Diff (%) | | --- | ---- | --- | ----| | vendor.css | 315kB | 286kB | 29kB (9.21%) | | main-server.js | 94.2kB | 93kB | 1.2kB (1.27%) | | site.css | 1.52kB | 0.729kB | 0.791kB (52%) | | *Total* | *410.7kB* | *379.7kB* | **30.9kB (7.55%)** | - **ReactSpa Template** | File | css-loader | css-loader?minimize | Diff (%) | | --- | ---- | --- | ----| | vendor.css | 315kB | 286kB | 29kB (9.21%) | | site.css | 1.52kB | 0.729kB | 0.791kB (52%) | | *Total* | *316.5kB* | *286.7kB* | **29.7kB (9.41%)** | - **VueSpa Template** | File | css-loader | css-loader?minimize | Diff (%) | | --- | ---- | --- | ----| | vendor.css | 315kB | 286kB | 29kB (9.21%) | | main.js | 21.8kB | 21.6kB | 0.2kB (0.9%) | | *Total* | *336.8kB* | *307.6kB* | **29.2kB (8.67%)** | Please, feel free to recommend/perform any necessary modifications.

fergalmoran closed this issue

2025-08-09 17:17:53 +00:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github/JavaScriptServices#845