[Vue] Lazy Load a Route by using the Dynamic Import in Vue.js

By default, vue-router doesn’t lazy load the routes unless you tell it to do it. Lazy loading of the non-critical routes is one of the points of the PRPL pattern.

This lesson will show you how you can use the dynamic import to lazy load non-critical routes.

When we using Vue dynamice import syntax:

const router = new VueRouter({
  routes: [
    { path: '/images', component: () => import('./components/Images') },
    { path: '/images/:id', component: () => import('./components/Details'), props: true },
    { path: '/', redirect: '/images' }
  ]
})

To enable that, we need to install:

npm install babel-plugin-syntax-dynamic-import

.babelrc:

{
  "plugins": ["syntax-dynamic-import"]
}