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
- Webpack+UglifyJS minified:
  - Run webpack -p then fetch http://localhost:8080/w/load.php?lang=en&modules=ext.popups&only=scripts&skin=vector

Results

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

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

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)