[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"]
}