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