Check out a free preview of the full Complete Intro to React, v3 (feat. Redux, Router & Flow) course:
The "Creating a Landing Bundle" 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 demonstrates how the Landing bundle is only loaded when the user navigates to the Landing page.

Get Unlimited Access Now

Transcript from the "Creating a Landing Bundle" Lesson

[00:00:00]
>> Brian Holt: So let's go actually use the dynamic import now. So go to app.jsx and we are going to just do landing first, right? And then we'll work through the other ones. So we're going to import AsyncRoute from './AsyncRoute'. And then I want you to delete Landing, so delete Landing here.

[00:00:25] The reason why that's important is as soon as we delete our Landing, it's not going to include that anymore in the initial bundle. path= "/" okay, and then component, we're not gonna load Landing cuz that's no longer available upfront. What we're going to do is we're going to make this another arrow function, right?

[00:00:45] It's gonna take in props, and then it's going to render AsyncRoute. Props are going to be equal to whatever props are passed in, so props = {props}. And then the last thing is gonna be loadingPromise= {import('./Landing')}.
>> Brian Holt: What did I miss up here? All right, so that's fine.

[00:01:14] It needs to be that, right?
>> Brian Holt: Okay,
>> Brian Holt: So it's still Route, right, with react router. But the component it's gonna render, it's gonna render this AsyncRoute component, right? So AsyncRoute, the first time it renders it's gonna be a loaded spinner, right? But we're also passing it this promise.

[00:01:42] This promise is coming from import. Import is going to go out to webpack, or our server, and say, I don't have this, please get this to me. Webpack is then going to, our server's going to hand it another bundle of JavaScript. And then once that JavaScript is loaded, parsed, and ready to go, it's going to resolve that promise with that module.

[00:02:07]
>> Brian Holt: Now you might be asking where's the code split actually happening? Where do I tell it split the code here, right? The answer is it's just smart enough to say you called import there, I can cut off this entire part of the dependency draft. So anything that landing is depending on which is not much at the moment, but anything that is coming along with landing will be asynchronously loaded here.

[00:02:35] So let's take a look at what that actually looks like. So first of all if you go back to, I think I put this in a bad state, so let's try running this again.
>> Brian Holt: You changed your babel.rc file. So any time you change babel.rc, you're gonna have to start and stop your server again.

[00:02:59]
>> Brian Holt: It still didn't like that, unexpected token there.
>> Brian Holt: All right, so this sounds like it's a little dense for me, so I'm just gonna put this onto multiple lines, figure out where I'm going wrong.
>> Brian Holt: All right, so I have Route, exact, path, component. This is props that returns AsyncRoute, props, loadingPromise.

[00:03:40]
>> Brian Holt: And loadingPromise,
>> Brian Holt: That looks like it should work, right?
>> Brian Holt: Did I mess something else up?
>> Brian Holt: I saved my, I might have not saved my Babel file, I didn't, ha there it is. Gotta save your babel.rc or it doesn't work.
>> Brian Holt: Hopefully, it works this time.

[00:04:30]
>> Brian Holt: Okay, so now what I want you to come up and check out is we got 0.bundle.js and we have got bundle.js, right? Now granted, this is 5.58 megabytes, this is 10 kilobytes. Not a whole lot of savings, right? But imagine if you have large dependency graphs on each route, like one of them is bringing in moment.js, right?

[00:04:52] Moment's a fairly large library, so you only wanna load moment when it's necessary. So if we refresh this again,
>> Brian Holt: What I want you to look at, if we open network, we're gonna refresh. Notice that it loads bundle and 0.bundle.js because this is the landing route. So it's gonna have to load both those.

[00:05:22] But again, go to browse all, but now refresh again hard. I'm just gonna look at js for the moment. Notice that only bundle.js is being loaded. Then as soon as I go to home, it's gonna load another bundle, right? So this is what code splitting is gonna buy for you.

[00:05:38] It's gonna buy you the ability to have this code split out so that you can smaller initial bundle sizes. Again, this is something you're gonna have to carefully consider whether or not it's gonna be useful for you. This is not useful, right. Landing is so small that the ability to split this out is not super interesting.

[00:05:56] It would be better if we just included it the first time instead of having to split this out. But in a normal application when each route is going to be fairly sizable, you're gonna be saving maybe 100 kilobytes and that's a big deal.
>> Brian Holt: Also keep in mind that these files sizes look really large but it's unminified, it's un-g-zipped.

[00:06:18] All of this stuff is not production ready at this moment in time.