User:JHernandez (WMF)/Compressed JS comparison
Final version published at Extension:Popups/Minifying_assets_with_uglifyjs
Size comparison between minification performed by resource loader using uglify JS and using Node's uglify js via webpack.
- Sources: Popups at commit bbf47538c9ba9e1773c66920d413dce0a0e707c5
- Compiled files:
- ResourceLoader minified:
- Run
webpack, then fetch http://localhost:8080/w/load.php?lang=en&modules=ext.popups&only=scripts&skin=vector
- Run
- Webpack+UglifyJS minified:
- Run
webpack -pthen fetch http://localhost:8080/w/load.php?lang=en&modules=ext.popups&only=scripts&skin=vector
- Run
- ResourceLoader minified:
Results[edit]
| File | Bytes | Bytes % | Gzip -9 | Gzip Bytes % |
|---|---|---|---|---|
| ResourceLoader minified | 57963 | 100% | 14839 | 100% |
| Node uglify-js 2.3.6 minified | 34598 | 59.69% (40.31% smaller) | 11711 | 78.9% (21.1% smaller) |
Conclusion[edit]
Node's uglify produces 40% smaller code, being 20% after gzip.
Upon inspection on the compiled files, main reason seems to be because of mangling being enabled on the node version, as it seems to be safe now (in the past it was considered unsafe and not recommended). Unsure about if there are other changes on the node version that help make the bundler smaller.
Test 8 May 2017[edit]
| File | Bytes | Bytes % | Gzip -9 | Gzip Bytes % |
|---|---|---|---|---|
| ResourceLoader minified | 57670 | 100% | 14580 | 100% |
| Node uglify-js 2.8.22 minified | 33578 | 58.22% (41.78% smaller) | 10815 | 74.17% (25.83% smaller) |