vue实现懒加载的几种方法

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
        }]
})