Intermediate React, v3 Q&A and Code Splitting Modals

Transcript from the "Q&A and Code Splitting Modals" Lesson

[00:00:00]
>> Any questions about what I've shown you so far?
>> Can I import external CSS, with lazy?
>> You could. Yeah, can you import external CSS using lazy like from an external CDN?
>> Yeah.
>> I think you just wanna let the browser do that. I don't think you'd want to react in [INAUDIBLE] To handle that?

[00:00:21] You would just say like load CSS and let the browser handle that. I wouldn't necessarily use lazy for that. But what I will say is like let's say here in details I had CSS and I just said import css/style.css. This would be smart enough that it would split out this and it would come with that lazily loaded component.

[00:00:44] So that's how you would kind of like do what you're asking.
>> Is there any way you can also add like a pre-catch, preload to these?
>> That's a great question. So he's asking, can I add like a prefetch or a preload to these things cuz like, let's say I land on the homepage, and I know they're about to go to the sign up page.

[00:01:06] Can I get ahead of that for them? So, this is actually something I implemented myself when I was working at Netflix and help some of the engineers do it there. It's called resource hinting is what you're getting at. You need to be one really careful because a lot of times you don't actually know what the user is about to do.

[00:01:24] So you don't wanna load resources greedily when the user is not about to use them. In particular, if you're targeting in markets where data is expensive, just be very careful about that. Now, that being said, the way that I would achieve what you're doing, it's not gonna be via resource hinting.

[00:01:40] What you gonna do is you're gonna have a service worker in the background. Go out and fetch those resources. And then when react makes a network request for that js, they'll actually hit the service worker first and the service worker will serve that request. So actually it have been prefetched by the service worker and then serve to react.

[00:01:59] And react we'll know the difference. That's your question?
>> Yes. So the bigger like, if there was like a modal that they might use, you can use something like that on it to kind of just like, really load it?
>> Exactly, that's exactly it. That's how I would do it, there's probably a way to like pre-populate those caches with parcel, but you're really into the weeds at that point.

[00:02:28] Like you're messing with parcel internals at that point and that's this a scary place to be. Whereas like that, service work thing would always work, and it would work really well. Okay, let's actually go implement modal really quick. So, head back, let's see what's my notes here? Go into details.js.

[00:02:54] So what I want to show you here, if I click adopt Luna it loads this nice modal. Now let's say this modal again loaded moment js and rxjs and also all of webassembly, all at once to show this modal. It's great idea. So, user experience I came up with just now.

[00:03:12] Let's say this is a very heavy modal and we only want it to load that modal whenever it was necessary on this page. We can do the exact same thing. Delete the model here. Say lazy up here. And we're gonna say const Modal= lazy. Function, import./modal. That's it.

[00:03:45] We have done everything we don't even have to reset up the suspense because the suspense is already above it right, like I didn't change that. That's still up here, it can still use that suspense because that suspense is just gonna bubble up until it finds the other, imports is gonna bubble up until it finds a suspense, it hits that it's like okay, I'm gonna load this here.

[00:04:04] So now, let's look at this page. We're gonna look at JS that gets loaded. As soon as I click adopt Luna, it's gonna go really fast. This is all local, but notice it's gonna load modal.js, which it did. And if you were very much paying attention you we're seeing the flash of loading.

[00:04:26] Now, modal.js was 10 kilobytes. And that's in development mode, which means it's probably under a kilobyte zipped and minified. So this was objectively horrible idea what I just showed you. But now I've shown you how to split even outside of routes.
>> Brian does this using the lazy and lazy loading format does that work in other bundlers besides the one we're using right now?

[00:04:54]
>> Most definitely. So the question is, does this lazy loading work outside of parcel, does this work in webpack, does this work in esbuild? So it definitely works in webpack, it works in snowpack, it works in parcel. So this import is respected like it's an official Java scripts standard made by TC 39.

[00:05:17] So all of the bundlers are looking for this import statement as a way of like a point where you can split. The only one today that doesn't handle that I know as esbuild. It's actually why I didn't choose esbuild for this course, it's cuz I knew this wasn't gonna work.

[00:05:33] Otherwise, I would have shown you esbuild for the rest of the course cuz it works as well as parcel does. And it's significantly faster. They are working on it. So it will eventually be an esbuild, they're just taking their time with it. So what I have shown you now this is everything up until all of code splitting.

[00:05:53] So if you want to see what we did, it was here code splitting. And that's it, that's really all there is to code splitting. It's a pretty straightforward thing to do for react, they make it really easy for you without lazy API. Thy used to be a lot harder.

[00:06:09] You had to use a component called react loadable. And previous versions of this class did use that. But now with lazy it's very simple to do.
>> In the [INAUDIBLE] Fallback, can I load the component forward?
>> So can you use a lazy component in the fallback? Yeah.

[00:06:27]
>> No [LAUGH] That would kind of defeat the purpose too. It's a good question, but you wouldn't want to lazy load a loading component.
>> [INAUDIBLE] A component and load that into fallback app as a component?
>> So yeah, you can create like a nice fancy like loading js that makes us elaborate loading, animation, and then you can load that in and show that here and it would just look like instead of h2 like this, you would have fancy loading, right?

[00:07:01] Something like that. You could definitely do that. You wouldn't wanna lazy load it, that's all