兩種方法：

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

語法：

1 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動態載入的語法：

1 import().then()

具體使用：

1 import(
2      /*webpackChunkName:async-chunk-name*/
3     /*webpackMode:lazy*/
4     modulename   
5 )   

業務程式碼：

1 import (/* webpackChunkName:'subpageA 
 
*/ './subPageA')
2      .then(function (subPageA) {
3          console.log(subPageA)
4      })
5 
6 import (/*webpackChunkName:'subPageB'*/ './subpageB')
7         .then(function (subpageB) {
8             console.log(subpageB)
9         })