最近，遇到複雜h5頁面開發，為了優化H5首屏載入速度，想到使用按需載入的方式，減少首次載入的JavaScript文件體積，於是將處理過程在這裡記錄一下，涉及到的主要是以下三點： 使用Webpack如何做按需載入 filename和chunkFilename的區別 如何命名chunk的名稱(webpa ...
最近，遇到複雜h5頁面開發，為了優化H5首屏載入速度，想到使用按需載入的方式，減少首次載入的JavaScript文件體積，於是將處理過程在這裡記錄一下，涉及到的主要是以下三點：
- 使用Webpack如何做按需載入
- filename和chunkFilename的區別
- 如何命名chunk的名稱(webpackChunkName)
1 使用Webpack如何做按需載入
大家都知道Webpack是現在流行的前端打包編譯工具，通過模塊之間的依賴關係，將代碼打包組織到一起。Webpack目前已經到v4.x，不同版本版支持按需載入的方式不同，主要有兩種：
- webpack1.x 中提供了 require.ensure()
- webpack2.x 中提供了 import()
require.ensure()
// 舉例
require.ensure([], function(require){
require('b');
});
webpack 在編譯時，會靜態地解析代碼中的 require.ensure()，同時將[模塊b] 添加到一個分開的 chunk 當中。這個新的 chunk 會被 webpack 通過 jsonp 來按需載入。
為什麼說到是靜態分析，我們可以看到下麵的require.ensure語法，第二個參數callback就是一個回調函數。其中需要註意的是，這個回調函數有一個參數require，通過這個require就可以在回調函數內按需引入其他模塊。值得註意的是，雖然這個require是回調函數的參數"module"，理論上可以換其他名稱，但是實際上是不能換的，否則webpack就無法靜態分析的時候處理它。
require.ensure(
dependencies: String[],
callback: function(require){
require('module');
},
errorCallback: function(error){},
chunkName: String
)
import()
要註意的是import() 函數不同於import命令，import 是 ECMAScript 6 Module 的語法，import 是靜態執行，這裡不多說，可以去看import 命令。
import(specifier)
上面代碼中，import函數的參數specifier，指定所要載入的模塊的位置，而且specifier可以是一個方法，動態的生成模塊路徑。import命令能夠接受什麼參數，import()函數就能接受什麼參數，兩者區別主要是後者為動態載入。
import()函數是 ECMAScript Stage 3 草案階段的語法；用於完成動態載入即運行時載入，可以用在任何地方。import()函數 返回的是一個 Promise。類似於 CommonJs 的 require() ，區別主要是前者是非同步載入，後者是同步載入。
import的應用場景有以下三種 (參考自ECMAScript 6 入門):
- 按需載入。import()可以在需要的時候，再載入某個模塊
- 條件載入。import()可以放在if代碼塊，根據不同的情況，載入不同的模塊。
- 動態的模塊路徑。import()允許模塊路徑動態生成。
用法大致如下：
import('./myModule.js')
.then(myModule => {
console.log(myModule.default);
});
小結
目前我們用的比較多的是import來做按需載入，模塊路徑可以動態生成，更適合現在的應用場景。
filename和chunkFilename的區別
能夠打包之後，我們會發現打包出來的chunk的路徑和命名是極其簡單的1,2,3...這樣子的數字，對於我們要定製路徑和名字的話，就會涉及到filename和chunkFilename。
- output.filename 決定了每個入口(entry) 輸出 bundle 的名稱。
- output.chunkFilename 決定了非入口(non-entry) chunk 文件的名稱。
常用的Webpack配置如下
module.exports = {
//...
output: {
filename: '[name].[hash].bundle.js',
chunkFilename: '[name].[hash].chunk.js',
}
};
filename和chunkFilename對應的結果可以由以下參數拼接或者返回：
| 模板 | 描述 |
|---|---|
| [hash] | 模塊標識符(module identifier)的 hash |
| [chunkhash] | chunk 內容的 hash |
| [name] | 模塊名稱 |
| [id] | 模塊標識符(module identifier) |
| [query] | 模塊的 query，例如，文件名 ? 後面的字元串 |
| [function] | 方法，可以返回一個filename字元串 |
不同的是chunkFilename我們不能想filename中的name那樣，可以在entry中定義。也就是說對於chunkFilename，預設[id]和[name]是一樣的，那麼如何自定義name呢？
如何命名chunk的名稱
只能說哪裡有壓迫，哪裡就會有反抗，chunkFileName不能靈活自定義，這誰能忍，於是便有了/* webpackChunkName: "" */，號稱是Magic Comments（魔術註釋法）。
Webpack通過增加內聯註釋來告訴運行時，該有怎樣的行為。通過向import中添加註釋，我們可以執行諸如命名chunk或選擇不同模式之類的操作。
這裡著重講一下webpackChunkName，它其實就是對chunkFilename定義時[name]值的改寫，/* webpackChunkName: "hello" */，意味著[name]等於hello。
於是上面的代碼就會按照下麵的方式來寫，打包出來的chunk文件將會出現在plugins文件夾下，名字叫myModule.a2d1d5d8e7d5d4d4d4se.chunk.js。
import(/* webpackChunkName: "plugins/myModule" */
'./myModule.js')
.then(myModule => {
console.log(myModule.default);
});
更多的魔術註釋，請參考Webpack官方文檔。
結束了
到此為止，我們已經可以將代碼打包到多個文件，每個chunk可以獨立命名，是的就是這樣。
