webpack的代码分割/离

两种方法：

1.webpack的methods----require.ensure

2.ES 2015的Loader spec

//require.ensure语法
require.ensure
        []:dependencies
        callback
        errorCallback
        chunkName

require.include当两个子模块都引用了一个第三方 的模块，就可以将这个第三方的模块放到父模块中；subPageA.js和subPageB.js都依赖moduleA.js

语法：

require.include('./moduleA')

代码分割的使用场景：

1.分离业务代码与第三方依赖；

2.分离业务代码和业务公共代码 和第三方依赖

3.分里首次加载和访问后加载的代码

一.require.ensure的使用代码：

    require.ensure(['./subPageA'],function () {
        var subpageA = require('./subPageA')
    },'aaa')


    require.ensure(['./subPageB'],function () {
        var subpageB = require('./subPageB')
    },'bbb')


require.ensure(['lodash'],function () {
    var _ = require('lodash')
    _.join(['1','2'],'3')
},'ooo')

import动态加载的语法：

import().then()

具体使用：

import(
     /*webpackChunkName:async-chunk-name*/
    /*webpackMode:lazy*/
    modulename   
)   

业务代码：

import (/* webpackChunkName:'subpageA */ './subPageA')
     .then(function (subPageA) {
         console.log(subPageA)
     })

import (/*webpackChunkName:'subPageB'*/ './subpageB')
        .then(function (subpageB) {
            console.log(subpageB)
        })