程式碼分割和懶載入

內建方法和Loader

require.ensure()

內建方法:require.ensure([dependencies], callback,errorCalback,chunkName) 動態載入程式碼
引數:
dependencies: 依賴項, 是一個數組, 不會執行
callback: 在這裡執行程式碼
errorCallback: 可省略
chunkName: 打包好的程式碼塊的名稱

require.include()

內建方法:require.include(chunkName) 載入第三方的或公共的程式碼塊, 但是不執行, 只是提前載入進來, 等到有引用它的程式碼塊出現時, 可以縮短載入時間.

ES 2015 Loader spec

import() 返回值是promise
import().then() 進行動態載入

webpack import function:import, 通過註釋的方式寫入引數
import(
/* webpackChunkName: async-chunk-name */
/* webpackMode: lazy */
moduleName
)

程式碼分割場景:

1. 分離業務程式碼 和 第三方依賴
2. 分離業務程式碼 和 業務公共程式碼 和 第三方依賴
3. 分離首次載入 和訪問後加載的程式碼 (用於首屏載入)

準備頁面:
subpageA:

 import './publicModule.js'
 export default 'subpageA'

subpageB:

 import './publicModule.js'
 export default 'subpageB'

publicModule:

export default 'publicModule'

pageA:

 import './subPageA'
 import './subPageB'
 export default 'pageA'

###### 分離業務程式碼 和 第三方依賴

###### 分離業務程式碼 和 業務公共程式碼 和 第三方依賴
將import 改為 require.ensure() 動態載入;

###### 多入口應用 程式碼分割和懶載入