vue实现懒加载的几种方法

时间:2023-02-09 19:23:03

vue实现惰性加载是基于:

1.ES6的异步机制

components: {
comp: (resolve, reject)
=> {}
}

2. webpack的代码分割功能

require.ensure(依赖, 回调函书, [chunk名字])

************************

懒加载方法一、

//此时每个组件单独使用的js会单独在一个文件里加载,每个文件加载一次
let Layout = (resolve) => {
return require.ensure([], () => {
resolve(require(
'@/views/layout'))
})
}

若需要将相同功能的组件捆绑进行懒加载,则需为捆绑添加chunk名字,如下:

//此时会将user与login的js文件捆绑在一起,加载一次
const user= (resolve) => {
return require.ensure([], () => {
resolve(require(
'@/components/user'))
},
'inter')
}
const login
= (resolve) => {
return require.ensure([], () => {
resolve(require(
'@/components/login'))
},
'inter')
}

懒加载方法二:

//利用webpack自带的import函数按需加载相应的组件
let user= (resolve) => {
return import('@/components/user')
}

 配置部分则不需要改变,常规配置即可:

var router = new Router({
mode:
'history',
routes: [
{
path:
'/user',
name:
'user',
component: user
}]
})