Check out a free preview of the full Complete Intro to React, v3 (feat. Redux, Router & Flow) course:
The "Code Splitting with Webpack" Lesson is part of the full, Complete Intro to React, v3 (feat. Redux, Router & Flow) course featured in this preview video. Here's what you'd learn in this lesson:

Brian introduces a feature of Webpack called code splitting, which gives developers the ability to separate application code into multiple bundles. As a user navigates the application, additional bundles are loaded on-demand.

Get Unlimited Access Now

Transcript from the "Code Splitting with Webpack" Lesson

[00:00:00]
>> Brian Holt: So I just reverted all my code back to using the death server. The one thing I wanted to go with capture in my package.json is the ability to run that server. So I'm gonna call this start.
>> Brian Holt: And then I'm gonna say, NODE_ENV=server node server.js. So now that if I say yarn start it'll start my production server, right.

[00:00:36]
>> Brian Holt: So again I can just come in here and say, yarn start, and it should be good to go.
>> Brian Holt: So yeah, you just have to make sure to not include hot module refresh, or it's gonna have a bad time.
>> Brian Holt: So I'm gonna change this back from watch to dev, so I can go back to the development server.

[00:01:08]
>> Brian Holt: So we're gonna talk about another thing here called code splitting, or chunking as it used to be called.
>> Brian Holt: There's a kind of a weird problem in particular doing server-side rendering, hot module replacement and code splitting all at once. It's a pick two scenario that the three cannot coexist all together given these state of how webpack works.

[00:01:40] And the real problem is this, we're gonna configure our routes to be asynchronous, right. So that when I go from landing to search, it's actually going to pull in the JavaScript for search. And then when I go from search to details, it will pull on the JavaScript just for details.

[00:01:56] The reason why it's nice is that means when I load landing for the first time, it's only going to load the code for landing, and it's not gonna load anything for search. And it's not gonna load up anything for details, right. In other words we get to cut down on our bundle size, and we get to load only the JavaScript that's necessary for that particular page.

[00:02:17] Which is gonna be again another performance win for us. This is again something that you're wanna to do in production. Maybe not in development because there's no real reason that you need to be doing that in development.