為什麼需要程式碼分割？簡單來說：就是讓使用者在最快的速度拿到想要獲取的內容。

程式碼分割不在webpack的配置用。而是內建在webpack的方法中：

1、require.ensure方法/require.include

2、es5 loader spll

先來說說require.ensure方法

接受四個引數，分別如下

        []:dependencies  依賴

        callback：回掉函式，require ensure 執行程式碼

        erro callback: 錯的的回撥，不常用

        chunkName: 指定chunk的名字

使用場景：分離業務程式碼，業務公共程式碼，第三方依賴&分離首次載入和訪問後加載程式碼

1、分割lodash

import * as _ from 'lodash';

修改成這樣：

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

2、分割公共程式碼

import './subpageA.js';
import './subPageB';

修改成這樣：

if (page === pageA) {
    require.ensure(['./subpageA'], function() {
        var subpageA = ['./subpageA']
    },'subpageA')
} else if (page === pageB) {
    require.ensure(['./subpageB'], function() {
        var subpageA = ['./subpageB']
    },'subpageB')
}
 

3、sunpageA和subpageB同時依賴moduleA

      而pageA依賴subpageA和subpageB

    這時候，可以在pageA中提前引入moduleA

require.include('./moduleA')

打包後結果如下：

  vender.chunk.js     541 kB       0  [emitted]  [big]  vender
subpageB.chunk.js  368 bytes       1  [emitted]         subpageB
subpageA.chunk.js  368 bytes       2  [emitted]         subpageA

  pageA.bundle.js    6.93 kB       3  [emitted]         pageA

而未提前引入moduleA的打包結果如下：

vender.chunk.js     541 kB       0  [emitted]  [big]  vender
subpageB.chunk.js  580 bytes       1  [emitted]         subpageB
subpageA.chunk.js  580 bytes       2  [emitted]         subpageA
  pageA.bundle.js     6.7 kB       3  [emitted]         pageA

很明顯。提前引入moduleA，得到的subpageA和subpageB要小很多。

-------------------------------------------------------------------------

使用動態import

把require.ensure 換成 import

程式碼如下：

if (page === 'pageA') {
    import(/*webpackChunkName:'subPageA'*/'./subPageA').then(function(subpageA) {
       console.log(subpageA);
    })
} else if (page === 'pageB') {
    import(/*webpackChunkName:'subPageA'*/'./subPageB').then(function(subPageB) {
        console.log(subPageB);
    })
}

/*webpackChunkName:'subPageA'*/   這是魔法註釋，新增chunkname的方法。

此時，雖然只引入了一個js，webpack卻幫我們把分割的js也引入了。

到此，學習結束。