Route-based lazy loading in vue

The lazy loading allows to load component on demand dynamically when it render. The browser make fresh request to load component dynamic using import method as a regular component. It will automatically load the bundle containing that Component. Router based lazy loading works similarly, it loads component when user request route with specified URL for the first time.

Steps to implement router based lazy loading

1. Implement router in Vue application2. Add component using lazy loading

Implement router in Vue application

A router is process of binding a web URL to a specific resource or Vue component in the web application which allows to navigate from one component to another component in an application based on user action.

⇢ Implement router in Vue application

Add component using lazy loading

To load route using lazy loading in the Vue router, it needs to specify by using import statement in the function. function let you render a dynamic imported component as a regular component. It will automatically load the bundle containing that Component when the component is render first.

The lazy loading router can be specified inside the routes array using function and import statement, it expects component relative path which will be load once router is selected as shown below.

Lazy loading route in Vue application

 1 const routes = [
 2   {
 3     path: "/",
 4     name: "home",
 5     component: HomeView,
 6   },
 7   {
 8     path: "/about",
 9     name: "about",
 10     // route level code-splitting
 11     // this generates a separate chunk (about.[hash].js) for this route
 12     // which is lazy-loaded when the route is visited.
 13     component: () =>
 14       import(/* webpackChunkName: "about" */ "../views/AboutView.vue"),
 15   },
 16 ];