00:00 All right, so we've got a pretty neat application here. When you click on Show Globe, then it's going to ask you for your location. If you say Allow, then it's going to move the globe where you are. So that's where I am, here in Utah. Awesome. So what's interesting though, is that a user showing up to

00:18 the application right from the get-go like this, they probably don't need to load that globe. Maybe there are other things that we do in our application, and we don't necessarily need the globe code loaded. The thing is, the globe code is actually non-trivial. There's a lot going on with that globe code. If we take a look at our network,

00:37 and let me expand this a little bit, say Show Globe, then yeah, actually the globe is loaded already, so it wasn't there. If we take a look at our network now, we're going to see React Spring, D3, Use Gesture, and all of this stuff is pretty big. It's in my disk cache, so if I empty the cache in hard reload,

00:56 then we'll see how much code that ends up being. There's also this topo JSON client in the countries. That thing is 250 kilobytes, my goodness. So yeah, there's quite a bit, and I believe this is all gzip too. So well, it looks like it's not.

01:13 So it's two megabytes worth of information transferred, most of it being JavaScript or JSON. It's just a lot, it's not a little bit. So it would be cool if we could just, I mean, I don't want to say, no, we don't load that stuff, like you can't have your fun stuff. But I do want to say that, well,

01:31 maybe there's a way that we could load the stuff that the user needs right off, and then load the rest of it on-demand as the user is interacting with the app. That's what code splitting is, that's what lazy loading is. The other thing I want you to look at, in addition to the Network tab, is the Coverage tab.

01:49 So if I hit Command-Shift-P to pull up this drawer, I can't remember what this command palette is, then we want to pull up the drawer for coverage. So that is this little piece right here. And if I reload the page, then we'll see there's actually a lot of JavaScript that is unused.

02:09 We've got React-DOM, we've got, oh, there's some of my extensions going on in here. But here's React-Spring, and D3, and UseGesture, a bunch of other things, this TopoClient, lots of things that are unused. We aren't, that is loaded and ready to go,

02:29 but should not probably be loaded quite yet. And so that is your objective here, is to reduce the amount of unused JavaScript that we've got on here. I also have done this with CSS, because there, also we'll show you CSS in here as well,

02:48 which can be useful. You can dive into this a little bit deeper from this article about the coverage panel for finding unused JavaScript in CSS, which is kind of handy. So yeah, let's go ahead and lazy load this globe and see how this impacts the loading performance

03:06 of our page and the unused JavaScript on our page as well. See you in a sec.