Let's lazy load our routes with code splitting. In this video, we'll see how things look when working with Vite. If you used Vue CLI to set up the project, you can skip to the next video. What is lazy loading and code splitting?
First, let's take a look at our dev tools to understand how things are working. Open the Network tab and select JS. Then refresh the page. You will see that the code for all of the different destination pages has been loaded by the browser.
This is how it works in development mode in Vite. It uses browser support for JavaScript module imports to include all the imported modules into the page. In build mode, Vite would bundle all of this code into a single file. Let's look at that.
We can build our project using the npm run build command. Now we have a dist folder in our project. js. js file to be served at a single time.
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 only, and that all of these would only load if we actually go to those corresponding pages? That would make our app much lighter and faster. Using Vite's code splitting feature for production builds, 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, it is really easy to do this. Let me show you.
js, we can use a dynamic import to lazy load the code for the Brazil page. 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'll also need to remove the imports from the top of the page for our destination pages.
And, while we're at it, we'll go ahead and remove the About route, since we won't be using it. Now, let's take a look and see how it works in the browser. Back in the Network tab, we no longer see the individual pages being loaded in. If I clear this, and then click on the Brazil page, you'll see we load the code for the Brazil page component, and the same thing for each of the other destinations.
The browser now only imports the file when its corresponding page is visited. Pretty cool, right? Since Vite doesn't actually bundle your JavaScript for development, let's take a look at what's produced when we build the application for production. Let's run the build command again.
Now let's take a look at our assets directory. You'll see each page now has its own chunk or file. If you want to learn more about lazy loading and how to lazy load components, we have a lesson here on ViewSchool dedicated to it. I've added a link to it in the description.