实现vue懒加载

2018/03/10 vue

懒加载的三种方法

  1. 在组件里设置
    components: {
        viewCom : (resolve) =>{
        // ajax或者axios请求后返回执行
        // 用定时器模拟一下
        setTimeout(()=>{
            // viewCom 是要异步加载的组件
            resolve(viewCom)
        },1000)
        }
    }
  1. webpack的代码分割功能

require.ensure([依赖],回调,chunk名字) 依赖是一个数组,没有依赖的话直接写一个空数组 回调 chunk名字:如果想让两甚至更多的模块同一时间加载的话把chunkName设置成一样的就可以打包加载了。

    let viewCom = (resolve) => {
        return require.ensure([],()=>{
            resolve(require('组件路径'))
        },"chunkName")
    }
    components: {
        viewCom
    }
  1. import

这种方法没办法把多个模块打包到一起加载

    let viewCom = (resolve) => {
        return import('组件路径')
    }
    components: {
        viewCom
    }

Search

    Table of Contents