Browserify/Bundle Compression & Optimizations

[mattdesl]

There's some useful stuff we could add to the bundle options for browserify. This would have to be passed to dev.js and release.js.

https://github.com/Jam3/prj-gout/blob/master/scripts/bundleOptions.js

• React Optimize as in #278
• envify can be run globally in prod — bundle time slows down a bit, but it can remove some code in your dependencies & node_modules
• unassertify can be added to remove assert requires in production, as well as any modules associated with it that aren't used elsewhere in your bundle
• unreachable-branch-transform can be used to remove envify stuff and it's more effective than UglifyJS dead_code. On the final Gout bundle we can save 230kb with this transform compared to UglifyJS dead_code. 😱 It slows down build time, though.
• bundle-collapser can be used to strip module/file names from our final bundle, making it a bit more obfuscated and also smaller bundle size.
• optimize-js can be used to improve initial JS execution time, see here on Gout
• The browserify settings can also be configured to allow disc to visualize the bundle bloat/size. See here on Gout.

[jeremenichelli]

It would be great if we all start playing with this on our current projects running local tests or give them a try on some already developed projects, but I'm really looking forward to add most of this stuff.

I'm really ashamed of the bundle size we are delivering currently, so let me know if you need any help testing all these @mattdesl.

Also a side note, I remember mentioning react-optimize preset in one of my talks about React performance and honestly didn't notice any bundle size reduction or speed improvement.