Preact: How to reduce build size

[bradennapier]

I am likely doing something completely incorrect to cause this, but I am not quite sure what it would be. My builds are quite a bit larger than advertised.

[0] ./~/preact-compat/dist/preact-compat.js 16.9 kB {0} [built]
[10] ./~/preact/dist/preact.js 23.5 kB {0} [built]

They end up making up for about 80% of my application size.

I did have to manually alias to /dist/preact-compat or it would automatically point out /src/ -- which according to bug report in preact-compat will eventually be fixed

[developit]

Those are the unminified, uncompressed sizes, which are not very useful. Anyone concerned with performance uses compression (like gzip), so I only state gzipped+minified sizes: those are the bytes you pay for. It's very common to have code changes increase in raw size but decrease the gzipped+minified size - so you have to pick which you optimize for.

You can see both libraries and their sizes using gzip-size-cli or by looking at the dist files on unpkg:
https://unpkg.com/preact/dist/preact.min.js
https://unpkg.com/preact-compat/dist/preact-compat.min.js

To answer your question though: if you're using the unminified dist files (most people do), just make sure you're running UglifyJS on your resulting bundle. You can do this by invoking webpack -p or manually adding webpack.optimize.UglifyJsPlugin. This won't change the module sizes you're seeing from Webpack since they are displayed prior to compression, but it reduces both libraries by around 60%. Then, make sure to serve your JavaScript bundle with Gzip compression enabled, which will reduce the size by another ~60%. The total size reduction from these two steps is generally around 80-85%.

[bradennapier]

Ahh, I am using uglify so it is probably less than I am thinking. I will take a look at that and compression. thanks!!

[developit]

Yup! If you're looking at your bundle size composition, you should use source-map-explorer, webpack-bundle-analyzer or bundle-size-analyzer.

webpack-bundle-analyzer is particularly interesting since it shows you the nice tree map but the sizes are gzipped values!

Closing the issue since I think we got to the bottom of it, but feel free to chat here or on Slack.

[bradennapier]

Yep, when gzipped the package is 18kb total for the app - thanks! When I eventually get rid of preact-compat that means it will be crazy tiny :) too cool, thanks!