Webpack manifest

在使用 webpack 構(gòu)建的典型應(yīng)用程序或站點(diǎn)中，有三種主要的代碼類型：

1. 你或你的團(tuán)隊(duì)編寫的源碼。
2. 你的源碼會(huì)依賴的任何第三方的 library 或 "vendor" 代碼。
3. webpack 的 runtime 和 manifest，管理所有模塊的交互。

本文將重點(diǎn)介紹這三個(gè)部分中的最后部分：runtime 和 manifest，特別是 manifest。

runtime

runtime，以及伴隨的 manifest 數(shù)據(jù)，主要是指：在瀏覽器運(yùn)行過(guò)程中，webpack 用來(lái)連接模塊化應(yīng)用程序所需的所有代碼。它包含：在模塊交互時(shí)，連接模塊所需的加載和解析邏輯。包括：已經(jīng)加載到瀏覽器中的連接模塊邏輯，以及尚未加載模塊的延遲加載邏輯。

manifest

一旦你的應(yīng)用在瀏覽器中以 ?index.html? 文件的形式被打開(kāi)，一些 bundle 和應(yīng)用需要的各種資源都需要用某種方式被加載與鏈接起來(lái)。在經(jīng)過(guò)打包、壓縮、為延遲加載而拆分為細(xì)小的 chunk 這些 webpack 優(yōu)化 之后，你精心安排的 ?/src? 目錄的文件結(jié)構(gòu)都已經(jīng)不再存在。所以 webpack 如何管理所有所需模塊之間的交互呢？這就是 manifest 數(shù)據(jù)用途的由來(lái)……

當(dāng) compiler 開(kāi)始執(zhí)行、解析和映射應(yīng)用程序時(shí)，它會(huì)保留所有模塊的詳細(xì)要點(diǎn)。這個(gè)數(shù)據(jù)集合稱為 "manifest"，當(dāng)完成打包并發(fā)送到瀏覽器時(shí)，runtime 會(huì)通過(guò) manifest 來(lái)解析和加載模塊。無(wú)論你選擇哪種 模塊語(yǔ)法 ，那些 ?import? 或 ?require? 語(yǔ)句現(xiàn)在都已經(jīng)轉(zhuǎn)換為 ?__webpack_require__? 方法，此方法指向模塊標(biāo)識(shí)符(module identifier)。通過(guò)使用 manifest 中的數(shù)據(jù)，runtime 將能夠檢索這些標(biāo)識(shí)符，找出每個(gè)標(biāo)識(shí)符背后對(duì)應(yīng)的模塊。

問(wèn)題

所以，現(xiàn)在你應(yīng)該對(duì) webpack 在幕后工作有一點(diǎn)了解?！暗?，這對(duì)我有什么影響呢？”，你可能會(huì)問(wèn)。答案是大多數(shù)情況下沒(méi)有。runtime 做完成這些工作：一旦你的應(yīng)用程序加載到瀏覽器中，使用 manifest，然后所有內(nèi)容將展現(xiàn)出魔幻般運(yùn)行結(jié)果。然而，如果你決定通過(guò)使用瀏覽器緩存來(lái)改善項(xiàng)目的性能，理解這一過(guò)程將突然變得極為重要。

通過(guò)使用內(nèi)容散列(content hash)作為 bundle 文件的名稱，這樣在文件內(nèi)容修改時(shí)，會(huì)計(jì)算出新的 hash，瀏覽器會(huì)使用新的名稱加載文件，從而使緩存無(wú)效。一旦你開(kāi)始這樣做，你會(huì)立即注意到一些有趣的行為。即使某些內(nèi)容明顯沒(méi)有修改，某些 hash 還是會(huì)改變。這是因?yàn)?，注入?runtime 和 manifest 在每次構(gòu)建后都會(huì)發(fā)生變化。

查看 管理輸出 指南的 manifest 部分，了解如何提取 manifest，并閱讀下面的指南，以了解更多長(zhǎng)效緩存錯(cuò)綜復(fù)雜之處。

Further Reading

• 分離 manifest
• 使用 webpack 提供可預(yù)測(cè)的長(zhǎng)效緩存
• 緩存