Load a Heavy Module Asynchronously

[00:00:00]
>> Sean Larkin: Let's do npm install gsap. G-S-A-P. So, I'll just do G-S-A-P. Ooh it's a big one.
>> Sean Larkin: And there it's not a pure module of GSAP too. So like, they throw a bunch of stuff willy nilly in globals. And they're trying to work on that. Like GSAP 2.0 is gonna be really awesome.

[00:00:23]
I've been working with Jack behind the scenes for the last month or two. So we add the GSAP, let's just go ahead for example, right? Now, I think it's import TweenMax, or TweenLite from gsap. I think that's a good example, or I think maybe canonically what people might do is something like import * as GSAP from gsap.

[00:00:53]
And you don't really have to use it. I think this alone is enough for us to showcase like, holy moly, we've got a lot of unused code, right. So, let's just see our bundles increased in size. Well, that escalated quickly. There's 800 kilobytes, okay. And we can still see, this is pretty small amount of code in our lazy loading bundle.

[00:01:23]
So go ahead and jump into your dev mode. I ran npm run dev. And, let's just jump back into the browser. If you have Chrome, I would encourage you so we can look and do the coverage analysis. So lets open the drawer. Come on now, coverage.
>> Sean Larkin: I wish I could just see that standalone.

[00:01:49]
I don't like how they make.
>> Sean Larkin: Well now, look at that!
>> Sean Larkin: That's super interesting what the source maps do here.
>> Sean Larkin: So maybe this is actually kind of hard to visualize when you have source maps. This is kind of a bug Cuz what it does is it separates each file and wraps it in an eval.

[00:02:16]
And so like it's actually showing you how much of even this library is unused. That's super interesting. But, I guess that's okay. This is kind of a feature too. Originally I would expect to see this bundle jump up in unused size, right? You would see that. In this case, because we're using eval as a source map, it's actually separating it out into each individual file.

[00:02:43]
Which is kind of insightful. And saying, hey, you're instantly not using about 80% of GSAP, just by importing it, right? So, even if we haven't even played with it yet, I'm sure it's like in the global scope. So I bet, yeah, like Tweenlite is in the window now, so.

[00:03:07]
How can we prevent this from happening? So, let's say you don't actually need it until you hit the button, right? So we can take and we can lazy load this. So, we can say const getGSAP. Or here, let me just comment it out so you can still see for context.

[00:03:29]
So const getGSAP = a function that returns a dynamic import of that module, right?
>> Sean Larkin: Okay.
>> Sean Larkin: Well, let's go ahead, let's go back. Let's do another profile analysis. Let's just see what happened just as of now.
>> Sean Larkin: Whoa! It's not even on the list anymore. Like, this is just the web socket server for dev server.

[00:04:05]
But what's important is that, it doesn't even show up, it's gone.
>> Sean Larkin: So we just dropped like how much size from our bundles? We just split out essentially an entire.
>> Sean Larkin: Looks like four, five, 600 kilobytes.
>> Sean Larkin: Now, this is the dev mode, so let's run a prod bundle now.

[00:04:37]
So we're just kinda seeing the hot module replacement, so these are the only updates that were changed. But we should actually see three bundles that are now created, right? Lets just run yarn prod and look at our build folder.
>> Sean Larkin: Okay, so, what do we have here? There we go.

[00:05:01]
>> Sean Larkin: You'll notice that actually what webpack is doing is taking and it separates even the GSAP library into an entirely separated bundle. And there it is. There is the GSAP code. So, we've instantly saved ourselves by taking a pretty heavy library and asynchronously loading it. Now of course, we would want to use it inside of our button call, or whatever our event is, right?

[00:05:34]
So, getGSAP().then, and then gsap. I'm not sure what the best one would be to access. Gsap dot. We can just console log it to see what this actually returns. I think that's fair. So, I'll just run yarn dev and we can see it again. But we should see some console log load along with an XHR request, right?

[00:06:06]
>> Sean Larkin: So go to our network. I'm just gonna clear it for the sake of being able to see. And hey, two parallel requests! Right?
>> Sean Larkin: Now of course, if you still are watching coverage you are like, now it jumps up. But the point is that we use the coverage tool to determine our initial load time or the initial amount of code that's unused.

[00:06:35]
To just get your page rendered.