Code Splitting

[00:00:00]
>> Sean Larkin: So I did kind of a soul search cuz I wanted to do a talk about code splitting. And of course, I went to Google and I searched, then I found our old Webpack docs and I was like dang it. I was looking for more historical context, like who invented this idea, right?

[00:00:18]
But turns out, as you heard from me yesterday, it's Google Web Toolkit. Who's ever used Google Web Toolkit in the Java world? You know, you understand. So they're the pioneers of this technology, is that you can take, and if there is code that isn't used right away, like a button event or something, Google Web Toolkit would allow you to have this method called run asynch.

[00:00:44]
And any of the code inside of here wouldn't actually run until that event occurred, and it would be separated into a separate piece of JavaScript, right, that would be fetched dynamically. And so, when Tobias forked modules web make, the whole point was to bring this technology into bundlers.

[00:01:08]
[COUGH] And so, I tried to beat, I will beat this concept dead today. I want you to walk away, how would I say this? How would I be so over dramatic saying this? This is the number one most important thing that you could walk away with for enabling performance in your web applications.

[00:01:31]
If you learned anything, this is the one thing that I want to make sure you know back and front. No matter what. And this definition is very, I'm very persnickety about it because you're gonna hear a lot of other tools and a lot of other frameworks that are gonna say zero config code splitting.

[00:01:50]
That's not a thing. Or you'll hear somebody say
>> Sean Larkin: Other tools like Roll Up, they'll say we have code splitting now out of the box. Really, they don't, it's different. And this is not to knock on those. Rich Harris is a very close friend of mine. It's just not the same thing.

[00:02:13]
And you'll hear maybe like Ember. If you've ever used Ember, they say, yeah, we have code splitting, it's called Ember Islands. And no, that's just loading something in an iFrame dynamically. So code splitting to us means creating at build time, separate chunks of Java script that will only be reloaded asynchronously.

[00:02:36]
So think about that. Everything that we create is at build time. So when you use code splitting, you're creating these lazy bundles in your build step. And they are accessed via WebPack in the coded transforms asynchronously. So how does it work? We're actually gonna go through this entire process more in depth after we talk about performance.

[00:03:00]
But essentially, what WebPack does under the hood is it takes your entry point, it passes it to this thing called a resolver where you just make sure the file exists, right? Cuz if it doesn't, you can't parse it and read it.
>> Sean Larkin: We read the source code, we parse it, and we look for dependency statements like imports, redquires, the common JS, AMD syntax, etc.

[00:03:24]
And then, we put these little object models called dependencies on them. Well, all that we do differently with code splitting is that it's a different type of dependency. It's another flavor. And we leverage this information to say okay, at this point, separate everything in the graph into a separate bundle.

[00:03:41]
Flatten it, and create it.