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

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

原文地址：https://www.cnblogs.com/Answer1215/p/9255751.html