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