vue2组件实现懒加载浅析

1.普通加载

使用vue-cli 构建项目后，我们会在router文件夹下面的index.js 引入相关的路由组建，如：

@ 在cli配置中为src地址
import hello from '@components/hello'
import demo from '@/components/demo'
import slide from '@/components/slide'

这样做的结果就是 webpack 在 build 的时候会打包成一个整的 js 文件，如果页面一多会导致这个文件非常大，加载缓慢，为了解决这个问题，需要将他分成多个小文件，而且还要实现异步按需加载，即用到了再加载，而不用一股脑全部加载。

2.webpack 的require.ensure()实现按需加载

语法：
==require.ensure(dependencies: String[], callback: function(require), errorCallback: function(error), chunkName: String)==

• dependencies: 字符串构成的数组，声明callback回调函数中所需的所有模块，模块作为依赖被加载
• callback: 只需加载好全部依赖，webpack就会执行此函数，require函数的实现，作为参数传入此函数。当程序运行需要依赖时，可以使用require（）来加载依赖。函数体可以使用此参数，来进一步执行require()模块。
• errorCallback: 当webpack加载依赖失败时，会执行此函数。
• chunkName：当require.ensure()创建出的chunk的名字。通过将同一个chunkName 传递给不同的require.ensure()调用,我们可以将它们的代码合并到一个单独的chunk中，从而只产生一个浏览器必须加载的bundle。

使用方法一：

require.ensure([], function(require){
    require('./a.js')
})
//此时会单独打包出一个js文件，没有自定义名称的花，会被命名为1.js(有hash时候会带上md5)

使用方法二：

require.ensure(['./a.js'], function(require){
    require('./b.js')
})

1. 此时a.js作为依赖被加载，但是没有被执行
2. a.js和b.js会被打包成一个文件
3. 回调函数里只require了b.js，只有b.js的内容会被执行
4. 如果你需要使用a.js的内容，需要再加上require('./a.js')

require.ensure(['./list'], function(require){
    var list = require('./list')
    list.show()
})

vue中使用：

const list = resolve => {
    require.ensure([], ()=> {
        resolve(require('./list'))
    }, 'list')
}
resolve 的作用就是promise里面的那个resolve，在这里就是定义一个异步的组建

三：如何与webpack配合实现组建懒加载

• resolve => require([url], resolve),支持性好
• () => system.import(url),webpack2官网已经声明废除
• () => import(url),webpack2官网推荐使用，属于es7范畴