- Generate stats and analyze them. At minimum you need to do something like
webpack --json > stats.json. I like to use Webpack Visualizer to study the output myself as that gives a rough idea of what's going on. The official tool provides even more information.
- Once you have checked out the output in detail, you have several options. A lot depends on what you see. If some package is suspiciously big, you should look into your imports. Sometimes changing the way you write them can help a lot. There is also tooling to help in special cases. lodash-webpack-plugin is one example of that. If you are using Webpack 2 and your dependencies happen to use the right module format, you could benefit from tree shaking.
- Consider splitting your bundles. A basic way to do it is to end up with an
app and a vendor bundle. The idea is that done right we can leverage user caching (load only app or vendor) as those change. The setup isn't trivial but this is one direction. If you can spot dependencies that are specific to some particular view, you can load them dynamically. In Webpack 1 that can be achieved through require.ensure. Webpack 2 supports System.import based semantics (error handling, though you need to shim Promise for this to work!).
- Apply React specific tricks such as using react-lite or Preact instead of vanilla React. This can be achieved using a resolve alias, but you should be careful not to break your application. One low hanging fruit is to set React to build in production mode.
- Enable gzip on your server. This will give further gains over minification and is more or less a free optimization. There's a small computational overhead, but it's worth it.
- Leverage CDNs for loading heavy dependencies. This is useful particularly for heavy and popular dependencies. jQuery is the obvious example as it's so commonly used. You will need to do some custom setup and use Webpack's
externals to pull this off, but it's one direction. I recommend setting up a local fallback. The rough idea goes like this:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
window.jQuery || document.write('<script src="js/jquery-1.8.3.min.js"><\/script>')
</script>
TLDR; Analyze, simplify, split, leverage caching, rinse and repeat.