Webpack
webpack 隨附名為 SplitChunksPlugin 的外掛程式，讓
設定 Bundler 分割 JavaScript 檔案的方式。webpack 可辨識
動態 import() 和靜態 import 陳述式。當
如要修改 SplitChunksPlugin，請在其中指定 chunks 選項
設定：
chunks: async 是預設值，指的是動態 import() 呼叫。chunks: initial 是指靜態 import 呼叫。chunks: all 同時涵蓋動態 import() 和靜態匯入作業，可讓您
在 async 和 initial 匯入作業之間共用區塊。
根據預設，每當 Webpack 收到動態的 import() 陳述式時，就會產生該陳述式。該資料來源
為該模組建立單獨的區塊：
/* main.js */
// An application-specific chunk required during the initial page load:
import myFunction from './my-function.js';
myFunction('Hello world!');
// If a specific condition is met, a separate chunk is downloaded on demand,
// rather than being bundled with the initial chunk:
if (condition) {
// Assumes top-level await is available. More info:
// https://v8.dev/features/top-level-await
await import('/form-validation.js');
}
上述程式碼片段的預設 webpack 設定會產生兩個
分為兩部分：
main.js 區塊 (Webpack 分類為 initial 區塊)
包含 main.js 和 ./my-function.js 模組。async 區塊，只包含 form-validation.js (內含
資源名稱中的檔案雜湊 (如有設定)。僅下載這個區塊
if 以及 condition 是 truthy 時。
這項設定可延後載入 form-validation.js 區塊，直到
但他們其實需要的藉由減少指令碼數量，改善載入回應的速度
評估時間。指令碼下載與評估
就會發生 form-validation.js 區塊。一旦滿足指定條件，
動態匯入模組就會直接下載舉例來說
單獨下載 polyfill 的特定瀏覽器，或如為
先前範例—需要匯入的模組才能與使用者互動。
另一方面，變更 SplitChunksPlugin 設定來指定
chunks: initial 可確保程式碼只會分割在初始區塊。這些
靜態匯入的區塊，或列於 webpack 的 entry
屬性。看看上述範例，產生的區塊會是
在單一指令碼檔案中定義 form-validation.js「和」main.js 的組合。
可能會降低初始網頁載入效能
您也可以將 SplitChunksPlugin 的選項設為分隔較大的
指令碼轉成多個較小的指令碼，例如使用「maxSize」選項
如果 Webpack 的格式超過
由 maxSize 指定。將大型指令碼檔案分成多個較小的檔案，
加快載入速度，因為在某些情況下，評估會耗用大量 CPU 的指令碼
進而分割為小工作
長時間執行討論
此外，產生較大的 JavaScript 檔案也表示指令碼
快取撤銷的機率較高。舉例來說，假設你即將推出
架構和第一方應用程式程式碼的大型指令碼
如果只更新架構，若只有架構更新，則無法將套裝組合失效
組合資源
另一方面，較小的指令碼檔案也能提高
訪客從快取擷取資源，加快
重複造訪。不過，相較於更大的檔案，較小的檔案較不值得壓縮
可能有助於在未經背景工作的情況下，增加網頁載入網頁的時間
瀏覽器快取。必須謹慎以在快取之間取得平衡
效率、壓縮效果和指令碼評估時間。
Webpack 示範
webpack SplitChunksPlugin 示範。
學以致用
執行程式碼時會使用哪一種 import 陳述式類型
分割？
哪種 import 陳述式必須位於頂端
但無法在其他位置載入？
在 webpack 中使用 SplitChunksPlugin 時：
async區塊與
initial 個區塊？
已使用動態 import() 載入 async 個區塊
和 initial 個區塊是透過靜態資料載入
import。
答對了！
async 個區塊是透過靜態 import 載入
並以動態方式載入 initial 個區塊
import()。
請再試一次。
下一項：延遲載入圖片和
