Check out a free preview of the full Complete Introduction to React (feat. Redux and React Router) course:
The "Webpack Chunking" Lesson is part of the full, Complete Introduction to React (feat. Redux and React Router) course featured in this preview video. Here's what you'd learn in this lesson:

One of the more advanced features of Webpack is they ability to ‘chunk’ the application code. For example, the JavaScript on the details page is not needed initially so loading it later would allow the core application code to load more quickly.

Get Unlimited Access Now

Transcript from the "Webpack Chunking" Lesson

[00:00:00]
>> [MUSIC]

[00:00:03]
>> Brian: So let's talk about chunking. This is one of the more advanced features of Webpack, but I find it really compelling so I wanted to talk about it. And it's, I would say, one of the lesser known features of Webpack. So we have this big problem right now.

[00:00:19] I think it's a pretty big problem that if we go in here, and we were looking at this earlier, that how big is our bundle? Our bundle is absolutely ginormous, right? Well it's falling out of cache, right? But if we look here, our bundle is 945 kB. And what's really dumb about this is that we have our details page, and we have our landing page, and we have all these pages that we're loading all the JavaScript for.

[00:00:47] But we're not actually using them until we actually land on those pages. And so if you have a giant app, right, and you have 50 pages, it sucks that your users have to download the JavaScript for all 50 pages, when in reality, they actually only need the one page.

[00:01:01] Not only that, if you have a bunch of modules, right, it would be great if you could only download the correct modules for the correct pages. So Webpack actually has this magically built into it, because it builds a dependency graph of all of your different dependencies. And if you say, hey Webpack, I only want this page, it's smart enough to say, okay, this page only has these things, and it only shares these modules with these different other modules.

[00:01:26] So it's smart to be able to section off as okay, for example, we use axios on details but nowhere else, it says okay, I will only load axios when I'm on details but nowhere else. So that's what Webpack chunking is and I swear it's absolutely magical. It's going to just blow your mind.

[00:01:46] Okay, so first we need to tell Webpack yes, we wannna do chunking. So let's go to webpackconfig real quick.
>> Brian: Inside the output config object. So we need to tell,
>> Brian: Webpack where to put all the chunks. And we're gonna say publicPath here, :/public/. So you need both of those.

[00:02:19] So this is actually telling axios where am I serving my static files from on my server. Webpack has to know that because it has to know where to ask for those bundles, okay? And now we're gonna change chunks from false to true, because we actually do wanna see that data now.

[00:02:37]
>> Brian: Okay, so that's it. Webpack is, after that, smart enough to know what to do. I do have a mistake here that you'd offer in my dependencies. So just do an npm install --save node-ensure.
>> Brian: Okay, pretty sure that's the line I needed.
>> Brian: Yes, that's exactly the one I needed.