Welcome back. Now, before we move on to something else, I'd like to quickly touch upon dynamic imports, and how that might affect your bundle. So let's do this. I'm going to visit my webpack.mix.js file, and here we are compiling JavaScript, we're activating Vue, we're compiling some PostCSS, we're versioning our assets, but I'm also going to add this extract call. And what this does, by default, is it automatically extracts any common dependencies from your node_modules directory into their own file. And that way, you could have a single vendor JavaScript file that can be cached for a

that's our application code, but then I also have two more JavaScript files. One is your webpack.mix.js manifest file, and then the other is your vendor JavaScript code. And again, have a look how big this is. Now granted, we haven't compiled for production, which will drastically bring that size down, but nonetheless, you can see how useful it is to extract this vendor code into its own file. Okay, so the first step is when we add that extract method, all of your code is going to break until you update your script imports, or references. So let's do that now. I'll visit app.blade.php, and we'll duplicate this to pull in those other two files.

references. So let's do that now. I'll visit app.blade.php, and we'll duplicate this to pull in those other two files. manifest, and the vendor code. And that should do it. So if I switch back to Firefox, and we give this a refresh, there we go. Okay, so standard vendor extraction is useful. But now, have a look at this. If we go into my app.js file, here, like we discussed in the last episode, we're performing a standard CommonJS require, which means all of that code from the page component is being included with your standard app bundle. And in fact, why don't we play around with that?

all of that code from the page component is being included with your standard app bundle. And in fact, why don't we play around with that? And yeah, why don't we look for, how about just this tag right here, text3xl. Let's see if we can find that in our app.js code, text3xl, and sure enough, we can find that, again, your page component code is stored within your app.js bundle. And you know what? For lots of projects, I think that's probably the way to go. But as your application grows, you might find that it's useful to dynamically import these page components as they are requested.

But as your application grows, you might find that it's useful to dynamically import these page components as they are requested on the fly. Okay, so here's how we might do that. Let's go back into app.js, and I'm going to return this to a dynamic import. But yeah, as we discussed, that returns a promise, which means I can't call default off of a promise. I have to wait for that to resolve. So what we could do is make this an asynchronous function, and then I can say await for this import to complete, and only after that's done do I want to grab that default property off.