Introduction

You’re probably here because your app has grown to the point where forcing the user to download the entire thing as a single file seems cruel and unusual. Fact is, tons of features and a complex UX are bound to affect the amount of code you’re working with. What to do?

Easy. Make a “vendor bundle.” A vendor bundle contains all the frameworks and libraries each application feature depends on. By building all this code into a single bundle, the client can effectively cache the bundle, and you only need to rebuild the bundle when a framework or library updates.

It’s also worth considering that every time your application is updated or changed, the client must download new vendor dependencies. What to do?

You guessed it. Bundle ’em up. Put the parts that changed in one bundle and the dependencies in another. That way, the client only downloads what it needs.

In this post, I’ll walk you through the basics of bundle splitting in Webpack. As you might expect, I’ll also touch on code splitting.

How to create a vendor bundle

Assuming you have a basic React application, execute npm run build in CLI to get a baseline build:

Hash: 9db5a05e09ad73897fd4 Version: webpack 2.2.1 Time: 2114ms Asset Size Chunks Chunk Names ...font.eot 166 kB [emitted] ...font.woff2 77.2 kB [emitted] ...font.woff 98 kB [emitted] ...font.svg 444 kB [emitted] [big] logo.png 77 kB [emitted] ...font.ttf 166 kB [emitted] app.js 170 kB 0 [emitted] app app.css 3.11 kB 0 [emitted] app app.js.map 193 kB 0 [emitted] app app.css.map 89 bytes 0 [emitted] app index.html 248 bytes [emitted] [0] ./~/process/browser.js 7.3 kB {0} [built] [3] ./~/react/lib/ReactElement.js 13.2 kB {0} [built] [18] ./app/component.js 292 bytes {0} [built] ...

As you can see, theapp is quite large — about 170kb. That’s something you’ll fix in our upcoming example.