00:00 sometimes you are sending so much JavaScript to the client because you've got a really, really cool interactive thing that just the loading of the JavaScript itself and then parsing that JavaScript and then evaluating that JavaScript, just that alone is enough to make your application slow. Not just on the loading of the JavaScript,

00:19 but even parsing and evaluating actually can be pretty taxing, especially for low-end devices. And so in the web, well, in native platforms, you can go to the App Store and you download it, and it's like 60 gigabytes, and people are just used to downloading the entire application on the outset.

00:36 On the web, our users have higher expectations of us, which I have mixed feelings about. And they expect us to be able to, they go to the URL and boom, the app should be there. So we have to download the app on demand, which is kind of interesting that that is what they expect of us.

00:55 So we have the ability to load pieces of the application as the user needs it. So it's not necessary if a user's going to the login screen for them to also load the admin panel or anything like that. Like maybe they're not even an admin, so like downloading all of that code, maybe it's not totally necessary. So this is where code splitting comes in.

01:14 The idea that you can take your application, split it up into modules, and then load just the modules that are necessary for the screen that you're looking at. In a real world, big application, doing that can be tricky. And so this is why we have bundlers and these tools that can take a look at our module graph

01:34 and split things up intelligently. Frameworks will split things up automatically for us. So based on like routes and things, but we opt into this type of code splitting using the standard syntax called a dynamic import. This dynamic import will allow us

01:50 to import a particular module and it returns a promise. So then we can say when the module's loaded, then we're gonna import that stuff from, or use that stuff from the module. And if there's an error, then here's the error. This module object is the same thing as if we'd said module from some module.js.

02:09 So that module object will be the same. It'll have a default property, possibly, and whatever other named exports there are. And so that is, but the difference between what we're doing here and what we're doing here is that this will execute asynchronously.

02:27 And also you could stick this in a function and only call it when you're ready to use that module. Okay, so here's a example of doing this with React components, because this is such a common thing that React has a special API just for this, and it leverages suspense.

02:45 So here we have our smiley face. We're gonna pretend that this is just so big, we want to load this lazily. So we're gonna bring in lazy and suspense from React, and we're gonna make a variable called smiley face that is assigned to lazy. We provide a function that returns a promise which resolves to the module.

03:05 In our case, that's a function that imports this module. Now you notice we're importing .tsx. That's not a thing that you can do in a real browser. Browsers can't handle TSX files unless, well, they can't handle TypeScript syntax.

03:22 But in our bundler scenario, which we're using Vite in here, then that will get transpiled or compiled into a JavaScript module. So that will actually be imported using this import syntax, and then we get this smiley face component

03:41 that we can render. So of course, this is not actually triggering the import at this time. It's going to wait until the smiley face is rendered, and when that's rendered, then React will say, okay, great, let me call this function, and that's gonna trigger the import. That import's going to happen. There's a network request going on there,

04:01 and so that's why we have the suspense fallback. So while we're going to retrieve the code, we can show the user something. Once that code has been retrieved, then we have that and React will render our actual smiley face component. So that's how all of that works, and it's a pretty nifty way to split up our application

04:21 to avoid unnecessarily loading a bunch of stuff. Now, there are other optimizations that we can make on top of this, and that's what we're gonna be doing in this exercise. So yeah, let's get into it.