This course has been updated! We now recommend you take the Webpack 4 Fundamentals course.
Transcript from the "Using System.import() Solution" Lesson
[00:00:00]
>> [MUSIC]
[00:00:04]
>> Kent C Dodds: Maybe I'll slowly start going through the solution and I'll stop at some point and you can finish. So I'm just going to copy this. So we have system.import the thing I want to import is this render file. That holds all the require statements and everything to the modules that are huge that I don't wanna load yet.
[00:00:30] And then, I'm just going to console.log thing. So whatever it is that's coming back from that I'm also looks like render graph originally is taking graph area and store whatever those things are. So I'm going to accept those same things here graph area and store and then I'm going to find all the render graph references and just replace those with load and render graph.
[00:00:58] And I'll get rid of that import. And now from here, you actually might not even need to restart your server. It will create the chunked bundle for you or the Code Split bundle for you. So if I refresh now. If you look at the kilobytes here 370. That's down from 2.1 megabytes.
[00:01:24] Yeah, so most users won't have to pay that price anymore, If I click on this It's not actually going to work but what you'll notice Is we have this 1.8 MB file that's loaded when I clicked on that. And that's because it's now resolving that System.import. If we pop open our console here, we'll see this object that has a default property called updateGraph that looks like maybe something we want.
[00:01:49]
>> Speaker 2: Are source maps gonna continue to work and everything?
>> Kent C Dodds: Yep, magic. Yeah, so, Thomas is wondering. Code splitting by importing a react component and attaching it to the dom on the graph area node. Well we cover an example of code splitting when loading a react component via JSX, only when a component is loaded in the componentry that it actually requests dependencies.
[00:02:16] Yes so you could do something like that you could do the system.import call in a component like mount and then you could until the resolution of that module happened you'd just have like a loading. Or have the user click on something and then as a response to them clicking on that thing it's a system import and then you'd say set state this thing is now loaded and then it renders the loaded thing.
[00:02:45] So yeah this would actually be really trivial in react and Andreas asking used side by side with HTTP2 aggressive splitting plug in. That's a great question. Andreas I'm afraid I don't know the answer that question I think I've heard of that plug in. But I've never used it before so I'm going to just push this along a little bit further.
[00:03:09] So we're going to say Thing.default. Because that looks like that's the thing that we cared about. Now when I click it I see this update graph thing that takes a node in a store. Presumably this graph area, that's a node, that's what we were passing to it before.
[00:03:28] So actually before I shouldn't have deleted that. This is what we had before, so I'm gonna put it right here. And so it looks like thing.default is renderGraph. So I'm gonna say renderGraph = thing. And then I'm going to use render graph the same way I did before which was just basically this except with render graph instead of loading render graph.
[00:04:03] I save that, I keep refreshing by habit but cuz [INAUDIBLE] HMR I don't need to. And that works. And so that's the basic solution, I probably wouldn't call this thing thing but yeah. Now that's interesting graphArea to create an upper scope.
>> Kent C Dodds: Not sure why that's there but whatever.
[00:04:34] Here we'll just call this node.
>> Kent C Dodds: Actually in, here's a question from. Is it possible to put a variable inside the system import statement? Yes actually it is possible to do that. So I don't have an example of this, but this is a, I should have, I should have made an example of this cuz this is really really cool.
[00:04:55] So with web pack let's say that here, let me think let me show you something else really quick. Gonna show you a different example entirely. We're gonna check out. No, I think it was, was it workshop?
>> Kent C Dodds: No it is egghead goodness, now I can't remember what my branching scheme was.
[00:05:25] I've used this same repo for a lot of different things yeah. So we'll say get checkout lesson/code-splitting and we'll force it. So this code splitting example is totally different npn run dev. And apparently even the scripts are different. Npn start, cool, so then if I'm in here, whoops, something.
[00:06:02] All my dependencies are busted. So I can't show you the actual running example but I can show you the source code. So in here we have this fax loader thing. And all my dependencies report. So you had a fax list, and the fact text, and whenever you clicked on this fax list thing, then it would import a default fact and set the fax text.
[00:06:30] And all the facts are is like, whoa. Click on one of the animals to see an interesting fact, and so then there's gorillas. And holy be quiet. Gorillas can catch human colds and other illnesses, fun, interesting. Well not fun, sorry gorillas. But yeah, what's cool about this is let's say you had 500 of these, you wouldn't want to have some switch statement that said okay, if it's the fact about gorillas, then I want you to load this system.importfact/gorillas, that'd be really kind of sad.
[00:06:59] And so instead it can be dynamic and what web pack is gonna do is it's gonna say okay based off of the information you've given me here I know that the potential possible code split items or bundles that could be possible from this. Our default fact gorillas grasshoppers Index and worse ostriches, so I'm going to make a bundle for every single one of those and so regardless of whatever case it may be there will always be a bundle for an existing file.
[00:07:33] So excellent question so yeah. Actually in my example I kind of go crazy or in my solution I kind of go crazy with the de-structuring and I just say default whoops, render graph. Yep and that works. Who else has finished? Okay, sweet. I think we're about ready to move on unless there are other questions.
[00:08:04]
>> Speaker 3: Big question, the system import if it's already downloaded it once it won't download it again.
>> Kent C Dodds: Yeah, good question actually. Yeah I'm glad that you asked that. Let me demonstrate that. So here if I've got everything loaded that I need to. It's small as ever and it's awesome.
[00:08:21] Then I click on this. It pops open or it goes and loads that other bundle. And the cool thing about this is it it creates an entirely new file but I don't have to think about it. I don't care what it's called I don't care where it lives, web pack will keep track of where the files are, and it will just load it.
[00:08:40] And so yeah it pulls in this 1.8 megabytes file. Then if I toggle this off and toggle it on again. It knows it's already been loaded.
>> Speaker 3: So I was trying to cache it.
>> Kent C Dodds: Yeah, yeah. So actually, I see. Yeah,good call.
>> Speaker 3: Yeah.
>> Kent C Dodds: Yeah, no, you're good.
[00:08:56] So yeah webpack does that for you. The other cool thing about this is you'll notice that there, some of these have a response. Oops, wrong focus. Some of these have a response of three or four that means that it's not modified and the browser can get it from the cache.
[00:09:10] If I hit like a hard refresh then I get 200 from all these and I'll load it. Brand new as if I'd never seen it before. And then I do another refresh and I'll see three or fours. So the one of the reasons why code splitting is really great is because now if I make a change to all of my app code but I don't change the way that this separate code splits, file, any of that react stuff.
[00:09:44] Then I'm not gonna have to, well, I'm not gonna have to force the users to download any extra stuff just because I changed the other app code. That's not 100% the case. We do have to do a little bit more work, but we're going to do that work and then, yeah, that will be the case.
[00:10:01] It's going to be super cool. Is asking is there a best practice as to where you should define your split points. I'm guessing it would be very app specific. Yes it is pretty app specific. But a really good place is at your routes. So if you're using a router, angular too, can totally do you leverage code splitting and so you're using the angular router.
[00:10:21] Or an UI router for Angular 2 that's exactly where you do code splitting even if you're using Angular 1 that would be the place to code split if you wanted to venture and react. And then also like there are these one off areas that you're like yeah we wanna use D3 in this one section of our app and that's where you'd want to do code splitting.
[00:10:40] So, cool. Let's see, our time is 2:30. Okay, we're gonna actually fly by caching a little bit because lots of it is just kind of boilerplate. It's more like you need to conceptually understand it and then you can like you can pretty much get it when you look at the code.
[00:11:11] So, yeah let's move right along. So let me explain Commons Chunking. So actually for the next. Actually for the rest of the time we're going to spend optimizing our webpack configurations so that our app will load faster for the user. And that's pretty much one of the main things that you can do with with web pack as far as optimization goes.