This course has been updated! We now recommend you take the Intermediate React, v5 course.
Transcript from the "Why Code Split & Q&A" Lesson
[00:00:00]
>> Brian Holt: This is something that you should really be considering doing with your application. Particularly if your application code, like your JavaScript bundles, are like over a megabyte, right? Because you should have like an initial payload that's gonna be like, I would say no more than like 50 kilobytes.
[00:00:12] If you're doing more than 50 kilobytes you probably should try and slim down your initial page load to be the bare, bare minimum to get your application started. Obviously it's gonna vary by what kind of application you're doing, what kind of demographic you have. If it's an internal network thing and everyone's on gigabit fiber then you don't have to care, right?
[00:00:31] But if you're trying to reach rural farmers in Montana or you're trying to reach demographics in India, where they have congested Internet. This is something you really should be thinking about. And you have to remember, React itself is already 30-something kilobytes. So that's already just eaten out a big part of your application, so you have to be really conscious of these things.
[00:00:54] You can see here, this is 871 kilobytes. We're building this in development without gzipping, so that's why. We will make this much smaller, I think our application right now is about 50 kilobytes as is.
>> Brian Holt: Does anybody have any questions about what we did?
>> Speaker 2: She was talking about like named exports.
[00:01:15]
>> Brian Holt: Right, so I didn't say import default or anything like that. Is that what you're getting at? So loadable assumes that whatever's in details is the default export. There is a way that you can define that resolution. You'd have to look at the documentation, but there is a way around that if it's a named export, right.
[00:01:32] Does that answer your question? Okay, cool, good question. Loadable makes a bunch of assumptions and I'm just showing you like the bare minimum here. There's like five more things you can do with it, like let's see.
>> Brian Holt: Like error, I don't know, there's a bunch of other top level properties you can do here.
[00:01:56]
>> Brian Holt: Maybe, yeah, that's what I can do.
>> Brian Holt: isLoading, pastDelay, timeOut, error, retry, you can have it have like retry logic and some other things as well.
>> Brian Holt: Yeah, modules, I think modules is how you would fix that.
>> Brian Holt: Yeah, and then the last thing I was gonna show you is notice that when I first load the page.
[00:02:22] It's gonna go from loading, loading, split out page, and then it goes to loading cuz it loads all the. So I have multiple layers of loading here. We could probably handle this a little bit better than we do, but this works for now, yeah.
>> Speaker 2: Can you lazy load components without using React loadable?
[00:02:38]
>> Brian Holt: Yeah absolutely, so let's think about how we could do that. All right I think I got this. So I'm gonna go into this one.
>> Brian Holt: Okay, I'm not gonna do it cuz I'd have to refactor a lot of the code here but what you could do with petfinder-client, right?
[00:03:02] Because petfinder-client is always being called inside of component didmount and it's already asynchronous right? So pretend I'm not loading petfinder-client anywhere else, right? I could say up here, const pf =, let's do it inside of here.
>> Brian Holt: const pf = import petfinder-client, like this. And then I would say, petfinder =
[00:03:37]
>> Brian Holt: This would be PF promise actually.
>> Brian Holt: pfPromise.then, then you would have PF here, right? And then inside of this promise body you would have PF available to you. And then you could do all of this stuff inside of that promise, right? And you would have to move obviously all of this stuff into there as well, right?
[00:04:02] But you can define break points anywhere, it doesn't have to be routes, it doesn't have to be anything like that. Like, in fact, the next thing I want to, yeah, let's finish this out. That's a good point and I think I will,
>> Brian Holt: Yeah, show you some more things you can do here with the React loadable.
[00:04:21] But yeah, you can define those import points anywhere, you just have to use this import function where ever I put that, this.
>> Brian Holt: So that's parcel doing that for you behind the scenes, right? It's not React or anything like that, parcel's doing that. Same with webpack, will do exactly the same thing the exact same way.