Intermediate React Splitting All Components

[00:00:00]
>> Brian Holt: So let's go make everything a synchronous cuz why not? So we're gonna get rid off search params as well and results. And then we're gonna do basically the same thing here. Global details, we'll just make a couple copies of that one we'll call loadable results, I call this results, and this will be loadable search params.

[00:00:36] And this would be for search params, now the first thing you might say here, this is a little bit of repetition can we make like some sort of like higher order component. Yeah you absolutely could, like there's and that would probably be better, but I think for this case we are just going to keep it simple.

[00:00:57] And come back down here, and say loadable-results and loadable-search-params, okay? Now notice that on every page load, we'll have two bundles loaded, and you'll notice what results got loaded here, and then we'll go to search params page and yet another bundle will be loaded. Now this is wasteful, if we're being totally honest with ourselves.

[00:01:27] This page we just loaded ten kilobytes, and that unminified and ungzips, so that's actually the biggest it could be, right? You need to be shaving off like, I'm going to guess like 20 to 20 plus kilobytes at the very very least of gzipped application code before this become worth it, right.

[00:01:47] Because otherwise you're not really adding too much in fact you gonna make user wait when they try navigate to the different pages, and so it's balance, and this is something you should definitely track. You wanna be cutting off like a quarter second, a half second you have to making real dense into this, otherwise you're making your code more abstract and harder to follow, right this is going to be a little more difficult to debug.

[00:02:13] You're introducing more network latency into your application, so there's a bunch of problems with this as well. It's not always going to be a silver bullet that's going to make your application better. You should be shaving off a lot. But like let me show you how much of a difference it can make.

[00:02:30] You don't have to follow this I'm just gonna show you if I import or sorry, MPM install lodash, lodash is quite, quite large. And just for fun lets install moment JS as well, two pretty large libraries. Then I'm going to go into maybe the details page here, and I'm going to import lodash from lodash.

[00:03:00] This would normally be an underscore, right? And import moment from moment right, and just to use them I'm gonna say consul.log load. So I'm doing this just so I include these libraries into my bundle now. This is gonna balloon my bundle. I'm going to RPM run def here.

[00:03:30]
>> Brian Holt: It's smart enough to actually go and recognize that moment and load Azure only imported in details, right? So it's not gonna load upfront, and it's not gonna load them in the another bundles. So I am in details list should be good. Hard refresh in this page, notice that the results page 15 kilobyte, now if I go into details, I click on blue here, 745 kilobytes.

[00:03:56] So this would be a good point for us to introduce code splitting. So hopefully now you're kinda getting the picture like this is when it's useful and this is when it's not useful. Again it's not a silver bullet, It's definitely a trade off. Any time that you're introducing network latency, you need to be asking yourself some questions, right.

[00:04:14] You want to cut down on how many API calls your making, you want to cut down on how many bundles your doing. So you have to make the appropriate trade off here. Does it make sense cool, so this is again a big reason why I'm a big fan of code splitting.

[00:04:29] You can get your bundles really, really small. I have a separate conference talk that my slides are up and it also on YouTube called ten KB or Bust, how to get your application under ten kilobytes on that initial page load. Spoiler alert, you can't use react, you actually have to switch to preact, which I will show you how to do later today.

[00:04:46] [LAUGH] Do we have any questions about this? It's pretty cool, right? Like this was pretty much free, I just set up an import statement and it worked. I think that's really cool.