Maintain sane file sizes with webpack code splitting

[00:00] We've added a list of animals to our app. Click on each one, and it shows us an interesting fact about that animal. Click outside of the animals, and we'll get a default message. These facts come in individual files, but they're all loaded into the bundle with this import statement.

[00:15] For the purposes of our example, let's imagine that we have thousands of these. We prefer to load these on demand, rather than have them included in the bundle.

[00:23] We'll start off by getting rid of this import statement, and then, we'll go down here. Instead of setting the inner text right there, we're going to use the ES6 system api to import this module.

[00:33] This will return us a promise. We'll add a function called a "setFactText" that will take the result of this module import, and set the FactText for us. Now, we don't have the dynamic facts implemented yet, but let's go ahead and take a look at what this looks like in the browser now.

[00:49] If we refresh the page, we'll see that we're loading the bundle. If I load the default message, then, we see this 1.bundle.js which is loaded. That is the module that we just imported using the system api. Webpack has a runtime for us, so we don't have to worry about loading that ourselves.

[01:06] If we try to load the other ones, we're going to get an error in here, Facts is not defined. Let's go ahead and dynamically load the animal Facts. To load these, we could have a big switch statement, or if statement of some kind to check what the Fact is that we're looking for, and system importing that one.

[01:23] That would be really tedious, and not scale very well to our thousands of Facts that we're going to be adding to this application. Instead, Webpack is intelligent and will create a bundle for us for every possible combination or dynamic import like so.

[01:39] Let's go ahead and look at the browser now. As we click around, we'll see that the different bundles created for each one of this is loaded dynamically on the fly as needed. Let's go ahead and take a look at the output bundle. We open up our terminal here, we run npm.run build, and then, we go to our isDirectory.

[01:58] We'll see there's a bundle for each one of these dynamic modules. We open up one bundle, we'll see the bundle for the default Fact, we open up 2.bundle we'll see the ostrich Fact, and so on and so forth.

[02:10] Webpack creates these dynamically, and we don't have to concern ourselves with them at all. We only have to make these available to Webpack, at the time our application starts running.

[02:18] While this scenario is a bit contrived, the basic concept is extremely practical and powerful. For example, here is some code that we could write to lazy load parts of React application using React Router, and Webpack's code splitting. It's using the same system api, and Webpack is able to load entire sections of the application as needed.

[02:36] That's how you use code splitting with Webpack.