Kent C. Dodds: 0:00 Let's talk about code splitting. This is probably the single biggest impact you can have on your codebase performance just right out of the gate. Really low-hanging fruit here. The idea behind the code splitting is that it allows you to lazily load your code at the time that it's needed.

0:17 Here, I give you a little bit of background on why that's useful and in what situations that makes sense. I give you an introduction to dynamic import syntax which is supported by all the major bundlers and by the browser directly. You can go look at this blog post to see how the browser supports that. Go ahead and play with this native support in the browsers.

0:40 We'll take it a step further with React and its built-in support for dynamic imports. You can take a look at that as well. One thing that's important to note is that the thing that you're importing dynamically should have a default export that is a component. Keep that in mind for this exercise.

0:59 One other thing that I wanted to show you here is how you can analyze your app for the need and benefit of code splitting using the coverage feature of your developer tools. You can go ahead and take a look at that, but I'm going to jump into our exercise and show you that as well.

1:15 The exercise itself is actually just changing a few lines of code. Most of your time should be spent in the Chrome Developer Tools, looking at the Network tab, and at the Coverage tool right here as well.

1:29 Definitely, play around with both of those and get familiar with that. We'll want to change the default network speed. You can compare the production deployed version of the final and the exercise to see how those two differ. Thanks to the small changes that you're going to be making here.

1:45 Let's go ahead and take a look at the specific exercise. What we've got here is a little checkbox and it makes no sense for us to load all of the code necessary for what's behind this checkbox before the user clicks the checkbox. It just makes it take longer for the user to see the checkbox in the first place.

2:03 When we do click that, we show a globe, and we'll request your geolocation. You may have to approve that. Once you have, then it will locate you on the map with this fancy glow thing. We're using a bunch of pretty hefty libraries to do this.

2:19 In the final version, it looks basically the same except we'll be lazy loading that code instead, this one is probably best if you open it on the isolated page. Go ahead and go to that page, open up the developer tools, go to the Network tab, and you'll find this coverage here, but it may not show up for you.

2:38 When you're on this network tab, you want to hit the Escape key, and that will bring this up right here. You can click these three dots, click on Coverage, and that will pull that up.

2:49 You can also do CMD + Shift + P or some equivalent on Windows and type in Coverage. That will show you the coverage in the drawer here as well. You can click the refresh button. That will refresh the app. You'll see coverage information for all of this code.

3:07 You'll also notice some Chrome extensions may show up here, which is why it might be better for you to use Incognito mode when you're looking at this tool, so you don't have those Chrome extensions showing up in here.

3:18 This is also the development build of all of these files which is unminified and contains a bunch of development helping lines of code. It's probably better to test this with the production deployed version of this code, which is why I gave you links to those in the exercise information.

3:36 You can also slow down your network request with this dropdown here. You can take a look at the network request here for each individual file that is loaded to run your app.

3:47 Definitely, spend some time playing around with this stuff and we'll look at it together on the other side of the exercise. Don't forget to look at the extra credit. We've got a bunch here that I think you'll really enjoy.