The 100% correct way to split your chunks with Webpack
Working out the best way to serve up files to your users can be a tricky business. There’s so many different scenarios, different technologies, different terminology.
In this post I hope to give you everything you need so that you can:
- know what file-splitting strategy will work best for your site and your users
- know how to do it
According the Webpack glossary, there are two different types of file splitting. The terms sound interchangeable, but are apparently not:
Bundle splitting: creating more, smaller files (but loading them all on each network request anyway) for better caching.
Code splitting: dynamically loading code, so that users only download the code they need for the part of the site that they’re viewing.
That second one sounds far more appealing, doesn’t it? And in fact, many articles on the matter seem to make the assumption that this is the only worthwhile case for making smaller JavaScript files.
But I’m here to tell you that the first one is far more valuable on many sites, and should be the first thing you do for all sites.
Let’s dive in.
