Naming Webpack Chunks on Lazy Loaded Routes in Vue.js

In this tip, I would like to share how I usually work when I have to deal with routes and lazy load.

Most probably, you are used to see Vue routes like this:

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

Or maybe this way, with the routes loaded asynchronously and specified chunk name:

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 way it's really ok and it has nothing wrong. However, for most cases, I prefer to use a different system instead of using the "normal" approximation.

As you can see, there are some repetitive patterns. Since you are an awesome developer, you can use an array with the route options and then iterate with a map() function to avoid doing repetitive tasks.

Something like this:

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
})

🤩 Looks nice, isn't it?

We have reduced the use of the component key by using the route name as param in the import function.

But.. what happens if you want set the chunk name? I'm not a scientist, but as far as my knowledge reaches, you can't have dynamic comments in javascript. So, we are sacrificing comments (webpackChunkName) in favor of having to write less code. It's up to you.

Joke. Webpack to the rescue! As of webpack 2.6.0 , the placeholders [index] and [request] are supported, meaning you can set the name of the generated chunk thus:

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 nice! Now you have all the power, dynamically loaded routes with named chunks. You can check it out by running npm run build in your terminal:

build

As you see, it's extremely easy implement this in your vue.js applications. Now it's your turn. Start to improve your router.js file by using this awesome tip.

Don't miss out anything about Vue, your favourite framework.

Subscribe to receive all the articles we publish in a concise format, perfect for busy devs.

Related Articles

Use Web Workers in your Vue.js Components for Max Performance

Learn how to get up to 20x performance improvement of Vue.js components that rely on heavy tasks so they render and load faster

Alex Jover Morales

Alex Jover Morales

Mar 31, 2020

Lazy load images using v-lazy-image Vue.js component

Learn to improve the web performance of your vue.js application

Alex Jover Morales

Alex Jover Morales

Apr 16, 2019

Dynamic Imports in Vue.js for better performance

Tutorial on code splitting using dynamic import in vue.js applications in order to have better performance.

Paul Melero

Paul Melero

Apr 15, 2019

Sponsors

VueDose is proudly supported by its sponsors. If you enjoy it, consider supporting it to ensure the project maintainability.

Silver
Learning Partner