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 DevTools to understand how things are working. Open the Network tab and select JS and 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 only, and the JavaScript for the Brazil page on the Brazil page, and that this only loads if we actually go to that page? 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 our big bundle with your entire app. In Vue, it is really easy to do this. Let me show you.
js file, you will see that this 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 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 keys value to be an arrow function with an import of the page.
Now let's take a look and see how it works. Click on Inspect and open the Network tab. Select JS and then refresh the page. js file.
Now if we click on the Brazil link, you will see it loaded another JS file. And clicking on the Panama link will load another one. 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 Commons.
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 slash and the asterisk. Then we use the property WebpackChunkName and then the name we would like to give our chunk.
In our case, we will use the name of our component. Now let's take a look and see how it works. Open the Inspect tab of our app and click on the Network tab. Again, select JS and then refresh the page.
js. js. Magic comments are 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. 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 DevTools to understand how things are working.
Open the Network tab and select JS and 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 only, and the JavaScript for the Brazil page on the Brazil page, and that this only loads if we actually go to that page? 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 our big bundle with your entire app. In Vue, it is really easy to do this.
Let me show you. js file, you will see that this 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 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 keys value to be an arrow function with an import of the page. Now let's take a look and see how it works. Click on Inspect and open the Network tab. Select JS and then refresh the page.
js file. Now if we click on the Brazil link, you will see it loaded another JS file. And clicking on the Panama link will load another one. 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 Commons. 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 slash and the asterisk.
Then we use the property WebpackChunkName and then the name we would like to give our chunk. In our case, we will use the name of our component. Now let's take a look and see how it works. Open the Inspect tab of our app and click on the Network tab.
Again, select JS and then refresh the page. js. js. Magic comments are 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.