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

 

版权声明：本文为pomelott原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/pomelott/p/8406804.html