Reducing Webpack bundle size

[chucksellick]

I've been using https://github.com/th0r/webpack-bundle-analyzer to investigate the size of my vendor.js bundle in my current project - it was around 1.5mb and so far I've reduced it to 900k (minified).

However, react-bootstrap-typeahead is contributing in total around 110k to that size which seems rather heavy for a single component and over 10% of my whole bundle. In part this is due to dependency on react-overlays (weighs in at 37k, plus depends on dom-helpers which is another 12k). react-bootstrap-typeahead is itself 47k, and then the various other dependencies bring the total to somewhere around or above the 110k mark; they are only small dependencies but they add up.

My suggestions for some a couple of quickish wins would be:

• Remove dependency on react-overlays, instead use https://github.com/tajo/react-portal (which is tiny with no dependencies) and some other alternative for AutoAffix. Unfortunately tree-shaking doesn't seem to work with react-overlays so I am seeing the whole library bundled instead of just the bits you're using. This is probably also an issue with their bundling process.

• Instead of create-react-class, can you just use React.createClass, since React is a peer dependency anyway? (5k) Since posting this I realise that React.createClass is deprecated now. However, react-bootstrap-typeahead does not actually use this module, instead it is used by some child dependencies (react-highlighter, react-input-autosize, react-onclickoutside). You should probably remove this from your dependencies.

• Obviously any way to remove the other dependencies or otherwise reduce / split up the core bundle would be good too. I'm not using all the features yet still have to import all 110k.

I've attached the visualisation of my entire vendor bundle so you can see how this stacks up against other libraries:

[ericgio]

@chucksellick: Great suggestions, thanks! I was able to import Portal from react-overlays in such a way that I'm no longer including the entire lib, which reduced the package size by 25% (36.6kB -> 27.5kB minified + gzipped).

Using webpack-bundle-analyzer I also realized I was importing every highlight.js language by default in the examples, which increased the package size and made the code examples slow. Including just the two I needed reduced the package by over 50% and made everything a lot faster.

I tried a few other things to reduce the package size (eg: using individual lodash modules), but the gains were negligible. I'll look into some ways I can split up the package to make the features more modular, though that's not easy the way the code is currently written.

re: create-react-class, as you noted, this package is being used by react-highlighter, so there's not much I can do there. I did look into some alternative libs, but those were even bigger than react-highlighter + create-react-class. Hopefully the maintainer can upgrade his package at some point to just use ES6 classes.

[ericgio]

The above changes are available as of v2.0.0-alpha.6

[ericgio]

Saved an additional >2k (8%, minified and gzipped) by re-writing react-highlighter and getting rid of create-react-class.

[chucksellick]

Great stuff, that's awesome!