Lazy Load Routes in Vue with webpack Dynamic Comments

The JavaScript routing mechanism usually specifies which relative URL pattern corresponds to which component rendering. For example, the /about path should be rendered<about></about> Components. This article will explain how to achieve this with lazy loading in Vue/Vue Router and do it as concisely as possible.

A repository of code containing all of this article is available on GitHub.

You may have seen Vue routes (URLs):

 import Vue from 'vue'
import VueRouter from 'vue-router'

import Home from '../views/Home.vue'
import About from '../views/About.vue'
import Login from '../views/Login.vue'

Vue.use(VueRouter)

const routes = [
  { path: '/', name: 'Home', component: Home },
  { path: '/about', name: 'About', component: About },
  { path: '/login', name: 'Login', component: Login }
]

const router = new VueRouter({
  routes
})

export default router

This code will load in / path<home></home> Component, loading in /about path<about></about> Component, loading in /login path<login></login> Components.

However, this method of code segmentation is not done well, as all three components are packaged together instead of loading dynamically as needed.

Here is an improvement that uses dynamic import statements and webpack chunk names for code segmentation:

 const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import(/* webpackChunkName: "Home" */ '../views/Home.vue')
  },
  {
    path: '/about',
    name: 'About',
    component: () => import(/* webpackChunkName: "About" */ '../views/About.vue')
  },
  {
    path: '/login',
    name: 'Login',
    component: () => import(/* webpackChunkName: "Login" */ '../views/Login.vue')
  }
]

This approach is good, without obvious drawbacks, just slightly lengthy and repetitive. As a good developer, let's do some abstraction to improve it, use an array and do .map operations:

 const routeOptions = [
  { path: '/', name: 'Home' },
  { path: '/about', name: 'About' },
  { path: '/login', name: 'Login' }
]

const routes = routeOptions.map(route => {
  return {
    ...route,
    component: () => import(`@/views/${route.name}.vue`)
  }
})

const router = new VueRouter({
  routes
})

Now we have reduced the use of component keys and instead use the route name as an argument to the import function.

But what if we want to set the chunk name ?

As far as I can tell, you can't use dynamic annotations in JavaScript without some kind of build step. So in this case we sacrifice comments (webpackChunkName) to reduce the amount of code writing. It all depends on which method you prefer.

Just kidding, let's solve this problem.

Starting from webpack 2.6.0, placeholders [index] and [request] are supported, which means we can set the name of the generated chunk like this:

 // ...

const routeOptions = [
  { path: '/', name: 'Home' },
  { path: '/about', name: 'About' },
  { path: '/login', name: 'Login' }
]

const routes = routeOptions.map(route => {
  return {
    ...route,
    component: () => import(/* webpackChunkName: "[request]" */ `../views/${route.name}.vue`)
  }
})

const router = new VueRouter({
  routes
})

very good! Now we have all the features, as well as dynamic loading routes with named chunks. It works on Vue 2 and Vue 3. You can check it by running npm run build in the terminal:

However, we can also go a step further by grouping lazy load routes into named chunks instead of individual components. For example, we could create some groups that put together the most important components and the rest in another "less important" group. We just need to update webpackChunkName to replace the [request] placeholder we used before:

 const routes = [
  {
    path: "/",
    name: "Home",
    component: () =>
      import(/* webpackChunkName: "VeryImportantThings" */ "../views/Home.vue")
  },
  {
    path: "/about",
    name: "About",
    component: () =>
      import(/* webpackChunkName: "VeryImportantThings" */ "../views/About.vue")
  },
  {
    path: "/login",
    name: "Login",
    component: () =>
      import(/* webpackChunkName: "NotSoImportant" */ "../views/Login.vue")
  },
  {
    path: "/contact",
    name: "Contact",
    component: () =>
      import(/* webpackChunkName: "NotSoImportant" */ "../views/Contact.vue")
  }
];

Now our four components are grouped into two separate chunks.

That's it! A technique for lazy loading routes in Vue, and some suggestions on how to name and group them at build time.

The above is the detailed content of Lazy Load Routes in Vue with webpack Dynamic Comments. For more information, please follow other related articles on the PHP Chinese website!