Dynamic Import Exercise

[00:00:00]
>> All right, so I got a challenge for you, which is we can choose to do this asynchronously or not. In counter, right? It would be great to make an additional file, let's call it banner.js, right? And banner.js, maybe when the counter goes below zero over ten, something along those lines, we might choose to then dynamically load another bundle, right?

[00:00:30]
And show it on, your counter's below zero, above ten, so on and so forth. If you're like, I have not had to write vanilla JavaScript in a while and I forgot how one manipulates the DOM. Don't worry, I already prepared for that fact. Marcus is gonna shake his head because he probably believe that you should all know how to use vanilla JavaScript, but I know that, I don't.

[00:00:54]
[LAUGH] So if you needed inspiration for the sample code, something like this, there is a div with the id content and you could literally set it to the text. Clearly, the nice part is you don't necessarily have to worry about styling it because we have not talked about CSS yet.

[00:01:14]
We're simply gonna try to dynamically load another JavaScript file on the condition that it goes, whatever you choose. I think I chose in this example below 0 or you can go above 10, whatever makes you happiest. Then we want to then, in the same way we dynamically loaded that counter before, we wanna then go load one more bundle.

[00:01:35]
And then we'll kinda see how that gets split out as well. And we'll get a chance to play with that, and then see the different ways that that might work. Kinda get warmed up, get loose, make sure everything installs the way we think it's supposed to install on our setups work before we get into a deeper dive into the squirrely bits.

[00:01:52]
Cool. There was a little solution hiding down there for the eagle-eyed amongst us, but let's do it together. So we can go ahead and like I showed you a little bit of a cheat sheet here because this is not. This is about configuring our build tools, not about.

[00:02:14]
We're gonna talk about how to build stuff, not actually build it. It's gonna be great. So we'll make a banner.js. That seems like a good name for the file. And I can do export const addBanner. No one asked me yet, but if you're wondering, generally speaking, as they just, that's a lot.

[00:02:36]
Let's do document.querySelector, and we'll do that #content. I almost always use export const instead of export default. One is cuz for stuff like React for instance, if you give the thing a name first, like IntelliSense is better about doing the auto importing. And then two, it's easier to just add more things.

[00:03:01]
But the nice part is on those dynamic imports, if you export default then it's still called default, and then you've got to rename it to whatever you want. And so if I export the constant, I get the right name. But if you wanna export default, go for it, I just choose not to.

[00:03:16]
And then we'll do .textContent = text, right? Something super simple. And what we're gonna do to the counter is we're gonna say we do this in the render where we've got the current count. And we'll set that, and we'll say, if the count, do we want to do less than 0 or greater than 10?

[00:03:38]
What makes us happy? Let's do less than 0, all right. We'll go with that import, and in this example, I called it banner.js. And then we've got that addBanner in there. Is that what it says? Let's see. Yep, we've got addBanner, IntelliSense for the win. And then now we have that file.

[00:04:03]
I can say addBanner and we'll say, You're below zero. And we know how that plays. And what I want you to see as we do this is when the file gets imported, right? So that's what we're gonna watch for here. So go ahead, we've got hello from index.js.

[00:04:30]
And let's go ahead and let's give it a shot, where I'm gonna pull up the Network tab here. And we should see it in that case where if we increment, file's not loaded. I want all things. And let's clear it real quick. Increment, and then as soon as we decrement to below zero, then it's dynamically loaded when it's needed, and we pull in all of the assets, right?

[00:04:56]
And it's from that initial, from that counter.js. And we get that all for free. And as we go to build it, you'll see that that is all kind of taken care for us. We'll actually do it from in here. I've got that preview server going, but we'll do npm run build.

[00:05:12]
And now you'll see that it breaks out into three files. So if you do need to, if you're like, hey, we talked about what is the upper limit for the bundle. If you are like, I do wanna start splitting this out, and I wanna have some opinions on when it happens and why it happens, right?

[00:05:34]
Those dynamic imports will basically take care of everything else for you. Just to kind of illustrate the difference here, let's go ahead and we'll do it at the top of the file like we would normally do. And like I said before, if you're using a router or something like that, a lot of this is being taken care of for you by, whether it's your routing framework of choice is effectively doing this under the hood.

[00:05:59]
But this is how it works and how if you need to have opinions about it in your build process put stuff out it all works. So now if I pull it up here and I do an npm run build, you can see I only got two files now.

[00:06:10]
Cuz it knew that, hey, I'm not going. Now, ES modules out of the box would try to do two requests and in development it will theoretically try to have those things in place. But to cut down on the number of requests, it will bundle this all together into one file.

[00:06:29]
Cuz it's like, if you instantly need this file, right? It will kinda be put together in one chunk. So you get some control out of that, but not necessarily from configuring Vite or anything along those lines, from just writing your code with asynchronous fetching will do the trick.

[00:06:45]
And everything else is effectively taken care of for you at that point.