使用Vue进行项目开发已经有一段时间了,当打包构建应用时,JavaScript 包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。
- 方法一:直接引入 (不推荐)
import ShopcarContainer from './views/Foo.vue';
- 方法二:resolve
此法实现了按需加载,主要使用了resolve异步加载机制。
const Blank = resolve => require(['@/views/blank.vue'],resolve);
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
Const routes=[
{
path: '/',
name: 'blank',
component: Blank,
meta: {
title:'',
}
},
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
- 方法三:官网方法(import)
vue-router在官网提供了一种方法,可以理解也是为通过Promise的resolve机制。因为Promise函数返回的Promise为resolve组件本身,而我们又可以使用import来导入组件。
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
Const routes=[
{
path: '/',
name: Foo ,
component: () => import('@/views/Foo .vue'),
meta: {
title:'',
}
},
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})