This course has been updated! We now recommend you take the Complete Intro to React, v7 course.

Check out a free preview of the full Complete Intro to React, v2 (feat. Router v4 and Redux) course:
The "Creating Search and Details Bundles" Lesson is part of the full, Complete Intro to React, v2 (feat. Router v4 and Redux) course featured in this preview video. Here's what you'd learn in this lesson:

Brian finishes creating the Search and Details code bundles. He removes the module imports from the App.js file and instead uses System.import() to import each module with an AsyncRoute. Code for the application up to this point is on the v2-25 branch.

Get Unlimited Access Now

Transcript from the "Creating Search and Details Bundles" Lesson

>> Brian Holt: Yeah, let's just go ahead and finish the other two. They're the two routes on app.js. So get rid of Search and Details up here. We don't need those anymore. And we must remove those otherwise webpack isn't included in the initial bundle and we don't wanna do that.

>> Brian Holt: And all we're gonna do here.
>> Brian Holt: This is already that so we're just gonna change this to br AsyncRoute. We're gonna do AsyncRoute props=,
>> Brian Holt: Object.assign,
>> Brian Holt: shows: preload.shows, props. So we wanna pass everything that we got from here, but we also want to include our shows.

[00:01:23] That's what that object assigned is for, and then we're gonna do a loadingPromise, which is going to be System.import,
>> Brian Holt: ./,
>> Brian Holt: Details? No, Search.
>> Brian Holt: Okay?
>> Brian Holt: So I mean at this point this is getting kinda crazy.
>> Brian Holt: So you might break this on the multiple lines.

>> Brian Holt: Right.
>> Brian Holt: Up to you. It's kinda weird spacing, you could fix that however you want to. So let's go make sure that, that still works.
>> Brian Holt: What is that? Unexpected space between function name and paren.
>> Brian Holt: Right there. Are you happy, Linter?
>> Brian Holt: Okay.
>> Brian Holt: And then here, we're gonna do something relatively similar instead of returning details though.

[00:03:06] We're going to return AsyncRoute props=Object.assign, show: show0,
>> Brian Holt: props.
>> Brian Holt: And loadingPromise=System.import./Details.
>> Brian Holt: Okay.
>> Brian Holt: So app.js, we don't need BrowserRouter anymore. And here,
>> Brian Holt: 30 and 31.
>> Brian Holt: Yeah, this should be shows.
>> Brian Holt: Okay. Now, let's.
>> Brian Holt: Okay, so now we have three different bundles. We have bundle.js, which is the big one.

[00:04:50] We have 2.bundle.js, we have 1.bundle.js, and we have 0.bundle.js, right, which is one bundle for each route. So if we go to the homepage, you need to go to 50/50 now cuz I've changed back. [COUGH] We're gonna get bundle.js, we're gonna get 2.bundle.js, we're gonna go to Browse All, we get 0.bundle.js and then we go to details and we get 1.bundle.js.

>> Brian Holt: If we refresh the page, we only get bundle.js and just 1.bundle.js.
>> Brian Holt: Hoo, any questions about that? It's a roller coaster. So there's some complexity in splitting up your bundles into different pieces. But with it's not terrible. The one gotcha, I'm gonna point out to people that they don't realize.

[00:05:48] This must be a string that you pass to System.import for webpack to be able to recognize this is a. So I can't even say var x or var pathName = ./Landing. And say pathName right here. This doesn't work. And the reason is the way that webpack does this is via static analysis.

[00:06:18] It's not actually executing your code, all it's doing is saying, okay, I see a System.import with a string here, I'm gonna pull this out. So, static analyzes, you can't make that dynamic in any nature, it must be static.
>> Brian Holt: Does that make sense?
>> Brian Holt: Any other questions about specifically code splitting?

>> Speaker 2: Can you scroll down just a little bit more?
>> Brian Holt: Yeah, we could break this up into multiple lines, too.
>> Brian Holt: So yeah, notice that we're doing server-side rendering. This still works fine. I can turn this off. I can do it without server-side rendering. [COUGH] It makes no difference to react or webpack for that matter.