Intermediate React, v3 Code Splitting

[00:00:00]
>> Let's move on to code splitting so, we are gonna start with a fresh version of this app. So please grab another copy of this one here, portals-and-refs. Another fresh copy here, we'll have to run an npm install. While it's installing, let's talk about what code splitting is, you want your application to be as fast as possible, right?

[00:00:33] There's a lot of research that's gone into how fast the page load correlates by how much money your app can make. Amazon has done just infinite research on that subject, and relatively you can translate web performance to dollars made, in some capacity, right? So you want to show your users useful content as fast as possible, right?

[00:00:55] I want a user to see above the fold content so they can decide, what do I want to do on the site today? What do I want to click on they can start that decision making process of like seeing something understanding it. Deciding what they're trying to do, and then translate that to moving the mouse to clicking on it right.

[00:01:14] So in other words, there is a lag between someone seeing something on the page, what they can do and then moving their mouse to be able to click on it. So we're gonna show you a couple of techniques on how to improve that. The first one's gonna be code splitting, so if you have a enormous application, let's say what's a really big application like, like Facebook, right?

[00:01:34] Facebook does a million things, but most of it is a single page application. But if you load all of Facebook all at once on your first page load, that's gonna take a while, particularly if you're on the 2G network right. So you need to load part of the application at a time, and we're gonna do this through a technique called code splitting.

[00:01:58] So now that we have a fresh copy of this application, we're gonna do something where we're going to send the user the bare minimum amount of JavaScript. All at once to get our page up and running, and then not load everything else. So, first of all, what I'm gonna say here is for this application, not only is it overkill, this is actually actively a bad idea because our application is actually so small.

[00:02:24] That's splitting it up is a bad idea because we're going to incur more network latency. But imagine you have like a megabyte of JavaScript, right? At that point, you'd want to send them like 100 kilobytes to get them started. And then back load that 900 kilobytes later, does that make sense?

[00:02:41] Like right now our application is no more than, like 50 kilobytes, I imagine 5060 or something like that. So for us to split that into 10 mega kilobyte chunks, it's not a great idea. All that being said, we're definitely gonna do it, it's gonna be fun, all right, so head to app.js And what I want you to do, is I want at the top here, I want you to grab two new things out of react here.

[00:03:09] I want you to grab lazy, and I want you to grab suspense, lazy with a lowercase s with a capital S. suspense is a component that's why it's capitalized lazy is a function sweitzer. What we're gonna do is we're gonna split this by route, right so if a user navigates to search params, they're not gonna load details.

[00:03:33] If they go to details, they're not gonna load search params. So and then if a user clicks the page to go to details, then they're going to load that on the fly. And we're gonna do that through a technique called suspense. So the first thing I want you to do here is I want you to delete these two imports for details and search params.

[00:03:56] If we leave those in, then they're going to get bundled and the art what we're trying to do is here is not bundled them in. Okay, but now we have these like, hey, well, what is search parameters and what is details? What we're gonna do here is when to say const details = lazy, and I'm gonna use a function called import.

[00:04:24] This is called dynamic import, it's a functionality built into like JavaScript itself, right? This isn't even just a react thing, import here works how like require us to work for common js, right where it's a dynamic import. So this is an import that works at runtime parcel is actually smart enough to say like, okay, I found an import.

[00:04:44] I'm gonna break the code here, and I'm gonna break it into multiple bundles. Okay, so I'm gonna say import./details and I'm gonna do the same thing here for detail or for search params, so now, what lazy does is this lazy turns this dynamic import this returns a promise just so you know.

[00:05:09] And this turns it into a component that we can actually render here that works just like details in search params. But now it's a component that's going to be the lazy loaded later. Say that three times fast. Now what I want you to do, Is, I want you to wrap router here, with suspense, which is the component that we got.

[00:05:47] And we're gonna move everything inside a router inside of that. Okay, now, what is suspense? Suspense is basically saying, hey app, if you run into a component that's being lazy loaded in the background, this is where you pause. So for example here, notice that the header, actually the header is outside of it or is inside of it rather.

[00:06:13] But if I put it there, I could have like a Now this h1 won't go away this, let's make this an h2 This h2 won't go away But everything inside of here while it's waiting for something to load is gonna show them something. So what you have to do is you save fall back equals and here we're just gonna put like another h2 of loading route.

[00:06:48] So now, if something's loading here, it'll show that h2 to someone saying, we're waiting for something. Now, you should put some effort into this and make this like a nice loading spinner or something like that write something so that the user like feels acknowledged. Not some super lazy, hey, we're loading stuff, you can sit there and wait.

[00:07:09] Don't be actively hostile to your users, that's my general advice to you. All right, so let's go ahead and turn on our npm run Dev. Now the first thing I want you to notice here, when this is building is that this is gonna spit out multiple things. And if we look here inside of our dist, notice that that we got app.js, details.js search params.js and those are all now separate files.

[00:07:40] So app.js is gonna be the one that they always load no matter what this is going to have react in it. This is gonna have app.js, anything that we loaded here. Team context, react router dom, all this stuff that's shared among-st all of them and anything that's important here in app.js.

[00:07:56] The other thing that's pretty cool, let's say details.js, let's say we had, let's not look at the output. Let's say that modal, in fact, that's a good one modal is actually only used here in details.js. So, that means this is not going to exist in the app.js bundle.

[00:08:16] Or imagine that you're loading moment js, right? Everyone knows moment is enormous so, if that was only being loaded in one route, it would only come with that route. Don't use moment, that's maybe another just high level thing here. There's much better things you can use, like date fns or temporals, the new thing, anyway, know what this course is about.

[00:08:41] Yeah, so that's really cool, another really cool thing is it is smart enough about let's say that both details, and search brands used rx js, it would be smart to see like both of these are gonna actually use those. I'm gonna just share that, and I actually can create shared bundles that get loaded with either one of them as well.

[00:09:02] So it's actually pretty intelligent of how it splits these out. Okay, so let's go ahead and open our Adopt Me here. So let's look at our Network panel down here. And look at everything coming in, let's just just notice that we got AP details, but we did not get search params and notice this h2 won't go away.

[00:09:29] Okay now if I click adopt me notice it's going to load search params.js, and it did. But if I go back to this page, it's smartest, like I already have these. I don't have to do anything about that, right, so that's the power of suspense that just basically says like, if it's loaded, it'll keep those in memory and reload them again, like it won't re request the JavaScript.

[00:09:54] It's smart off to keep them on hand, and that's pretty much it, that's as hard as code splitting is. You just identify points in your application and routes is an obvious place to do it, but you can do it in other places. In fact, we're gonna do it with modal here in just a second just to show you that you can do it even within applications, or within routes.

[00:10:16] But yeah, this is a way that you can cut down your bundle size on really large applications. Just make sure that it's worth it right, and like I said, in this case, it would not be worth it because this is such a small application that we're definitely we're splitting hairs at this point.