Let's lazy load our routes with Webpack's code splitting feature. What does that mean? Okay, first let's take a look at our dev tools to understand how things are working. Open the network tab.
Select JS. and then refresh the page. js file. This file loads all the JavaScript for our entire application.
js file. This file is commonly known as the JavaScript bundle. But wouldn't it be better to only load the JavaScript for the home page on the home page and the JavaScript for the Brazil page only on the Brazil page, and that these only load if we actually go to the respective pages? That would make our app much lighter and faster.
Using Webpack's code splitting feature, we can split our bundle into multiple smaller files called chunks or bundles. In our case, we can split each page and lazy load the required code only when the route is visited. Code splitting makes your app so much faster because you only load what you need. The file size of the required bundles are much smaller than one big bundle with your entire app.
In Vue, this is really easy to do. Let me show you. js file in the router directory, you will see that lazy loading has already been configured for you for the about route. Let's take a look at how it works.
You will see that the home page is imported above, but the about page is not. The about page gets imported in the component property inside an arrow function. This is what we call dynamic imports, and it is all that is needed to lazy load our routes. The import statement will only be executed when the arrow function is called, thus lazy loading the component only when needed.
Let's lazy load all of our routes except for the home page, as we want that route to always be loaded on initial render. We need to remove the imports from the top of the page for our destination pages, and then change their component key's value to be an arrow function with an import of the page. While we're at it, we'll go ahead and remove the about route as well, since we won't be using it. Now, let's take a look and see how it works.
Whoops, I misspelled Panama here. js file. Now, if we click on the Brazil link, you will see it loads another JS file. And if we click on the Panama link, it will load still another JS file.
This is how code splitting and lazy loading works. It only loads what you need when you need it. Pretty cool, right? Did you know we can also name these files so that it is easier to see which files were loaded, which really helps with debugging.
Webpack gives us a feature called magic comments, where you can give your chunk a name. Let's add the magic comment to our chunks. As this is a magic comment, it is important to have the forward slash and the star. Then we use the property Webpack chunk name, and then the name we would like to give our chunk.
In our case, we will use the name of the component. Now, let's take a look and see how it works. If we go back to the homepage, refresh everything, you'll see that we have our bundle. js.
js. Magic comments are so cool. If you want to learn more about lazy loading and how to lazy load components, we have a lesson here on ViewSchool. I've added a link to it in the description.