Vanilla View Router supported lazy loading routes with dynamic imports, essentially only loading the code for a particular page when the route corresponding to that page is visited by the user. How can we enable this with Unplugin View Router? Well, lucky us, is this actually enabled out of the box, and this is just the way Unplugin View Router works. Let me show you.
I built my project here. with npm run build only. I could have used npm run build, but we gathered a number of TypeScript errors that I didn't feel the need to address during the course, and so npm run build just threw TypeScript errors for me. But npm run build only ignores the type checking and just builds the raw JavaScript and CSS and HTML code.
After I ran npm run build, I ran npm run preview. So this is the built out in the browser. If I inspect here and open up the network tab, I'm going to search for ID inside of the JS here and hit refresh. Notice that I have a chunk, a JavaScript file here called underscore underscore ID.
However, if I go back to the homepage, clear this out and then refresh the page again. Notice that there is no chunk, no JavaScript file called ID loaded. That's because this ID file corresponds to the individual user page that you get to by clicking on a specific user. If I look in my build code under the disk directory here, And then under assets, you can see that we have a chunk for many of our different routes.
Here is our create route. Here is that ID route that we just saw. Here is the catch all route. So essentially all of these are loaded asynchronously and only when the user goes to visit that particular route and we aren't unnecessarily loading up any JavaScript that we don't need.