柚子快報(bào)激活碼778899分享：webpack學(xué)習(xí)-6.緩存
柚子快報(bào)激活碼778899分享：webpack學(xué)習(xí)-6.緩存
webpack學(xué)習(xí)-6.緩存
1.前言2.輸出文件的文件名3. 提取引導(dǎo)模板4.模塊標(biāo)識(shí)符5.總結(jié)
1.前言
webpack 會(huì)在打包后生成可部署的 /dist 目錄，并將打包后的內(nèi)容放在此目錄。一旦 /dist 目錄中的內(nèi)容部署到服務(wù)器上，客戶端（通常是瀏覽器）就能夠訪問此服務(wù)器以獲取站點(diǎn)及其資源。由于獲取服務(wù)器資源是比較耗費(fèi)時(shí)間的操作，因此瀏覽器使用了一種名為 緩存 的技術(shù)。命中緩存可以降低網(wǎng)絡(luò)流量，使網(wǎng)站加載速度更快。然而，如果在部署資源的最新版本時(shí)沒有更改資源的文件名，瀏覽器可能會(huì)認(rèn)為它沒有被更新，從而使用它的緩存版本。由于緩存的存在，當(dāng)需要獲取新的代碼時(shí)，就會(huì)顯得很棘手。
這篇指南的重點(diǎn)在于通過必要配置確保 webpack 編譯生成的文件能夠被客戶端緩存；當(dāng)文件內(nèi)容變化后，客戶端又能夠請(qǐng)求到新的文件。
2.輸出文件的文件名
更改 output.filename 中的 substitutions 以定義輸出文件的名稱。webpack 提供了一種稱為 可替換模板字符串（substitution） 的方式，通過帶括號(hào)字符串來模板化文件名。其中，[contenthash] 將根據(jù)資源內(nèi)容創(chuàng)建唯一哈希值。當(dāng)資源內(nèi)容發(fā)生變化時(shí)，[contenthash] 也會(huì)發(fā)生變化。 webpack配置文件:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
plugins: [
new HtmlWebpackPlugin({
title: 'Caching',
}),
],
output: {
filename: '[name].[contenthash].js',
path: path.resolve(__dirname, 'dist'),
clean: true,
},
};
打包構(gòu)建: 感覺官網(wǎng)有點(diǎn)問題,webpack5的話，如果文件未更改的話，再次打包: 不會(huì)有新的bundle生成的。改變?cè)募?nèi)容再打包， 打包的哈希值改變了。
3. 提取引導(dǎo)模板
正如在 代碼分離 中所學(xué)到的，SplitChunksPlugin 插件可以用于將模塊分離到單獨(dú)的 bundle 中。webpack 還提供了一個(gè)優(yōu)化功能，可以使用 optimization.runtimeChunk 選項(xiàng)將 runtime 代碼拆分為一個(gè)單獨(dú)的 chunk。將其設(shè)置為 single 以便為所有 chunk 創(chuàng)建一個(gè) runtime bundle：
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
plugins: [
new HtmlWebpackPlugin({
title: 'Caching',
}),
],
output: {
filename: '[name].[contenthash].js',
path: path.resolve(__dirname, 'dist'),
clean: true,
},
optimization: {
runtimeChunk: 'single',
},
};
更改配置后再次構(gòu)建，查看提取出來的 runtime bundle： 由于像 lodash 或 react 這樣的第三方庫很少像本地源代碼一樣頻繁修改，因此通常推薦將第三方庫提取到單獨(dú)的 vendor chunk 中。這一步將減少客戶端對(duì)服務(wù)器的請(qǐng)求，同時(shí)保證自身代碼與服務(wù)器一致。可以通過使用 SplitChunksPlugin 示例 2 中演示的 SplitChunksPlugin 插件的 cacheGroups 選項(xiàng)來實(shí)現(xiàn)。試試在 optimization.splitChunks 添加如下 cacheGroups 參數(shù)并執(zhí)行構(gòu)建：
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
plugins: [
new HtmlWebpackPlugin({
title: 'Caching',
}),
],
output: {
filename: '[name].[contenthash].js',
path: path.resolve(__dirname, 'dist'),
clean: true,
},
optimization: {
runtimeChunk: 'single',
splitChunks: {
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name: 'vendors',
chunks: 'all',
},
},
},
},
};
再次構(gòu)建，然后查看新的 vendor bundle： 現(xiàn)在，可以看到 main 不再含有來自 node_modules 目錄的 vendor 代碼，并且體積減少到 412 bytes！
4.模塊標(biāo)識(shí)符
這一塊我本地的和官網(wǎng)的結(jié)果也是不同的。 按理說，應(yīng)該是三個(gè)文件的哈希值都發(fā)生了變化。這是因?yàn)槊總€(gè) module.id 會(huì)默認(rèn)基于解析順序增加。換言之，當(dāng)解析順序發(fā)生變化，ID 也會(huì)隨之改變。簡要概括便是：
main bundle 會(huì)隨著自身的新增內(nèi)容的修改而發(fā)生變化。 vendor bundle 會(huì)隨著自身的 module.id 的變化而發(fā)生變化。 manifest runtime 會(huì)因?yàn)楝F(xiàn)在包含一個(gè)新模塊的引用而發(fā)生變化。 上面的第一點(diǎn)與最后一點(diǎn)都是符合預(yù)期的行為，而 vendor 的哈希值發(fā)生變化是我們要修復(fù)的。試試將 optimization.moduleIds 設(shè)置為 ‘deterministic’： 但是我只有main bundle的哈希值有變化的。就和將 optimization.moduleIds 設(shè)置為’deterministic’的效果是一樣的。
5.總結(jié)
1.輸出文件的文件名：ebpack 提供了一種稱為 可替換模板字符串（substitution） 的方式，通過帶括號(hào)字符串來模板化文件名。其中，[contenthash] 將根據(jù)資源內(nèi)容創(chuàng)建唯一哈希值。當(dāng)資源內(nèi)容發(fā)生變化時(shí)，[contenthash] 也會(huì)發(fā)生變化。解決瀏覽器緩存問題。 2.提取引導(dǎo)模板：webpack 還提供了一個(gè)優(yōu)化功能，可以使用 optimization.runtimeChunk 選項(xiàng)將 runtime 代碼拆分為一個(gè)單獨(dú)的 chunk。將其設(shè)置為 single 以便為所有 chunk 創(chuàng)建一個(gè) runtime bundle，可以將像 lodash 或 react 這樣的第三方庫很少像本地源代碼一樣頻繁修改，因此通常推薦將第三方庫提取到單獨(dú)的 vendor chunk 中。 3.模塊標(biāo)識(shí)符：暫無學(xué)習(xí)經(jīng)驗(yàn)
模塊標(biāo)識(shí)符：每個(gè)模塊在 Webpack 中都有一個(gè)唯一的標(biāo)識(shí)符，稱為模塊標(biāo)識(shí)符。模塊標(biāo)識(shí)符用于標(biāo)識(shí)和區(qū)分不同的模塊。它可以是一個(gè)數(shù)字、字符串或其他類型的標(biāo)識(shí)符，具體取決于模塊的類型和配置。 模塊標(biāo)識(shí)符在 Webpack 的模塊系統(tǒng)中具有重要的作用，它被用于： 1.模塊的依賴關(guān)系管理：Webpack 根據(jù)模塊之間的依賴關(guān)系來構(gòu)建應(yīng)用。模塊標(biāo)識(shí)符用于標(biāo)識(shí)模塊之間的依賴關(guān)系，使得 Webpack 可以正確地加載和解析模塊。 2.模塊的引用和訪問：當(dāng)一個(gè)模塊被其他模塊引用時(shí)，模塊標(biāo)識(shí)符用于唯一地標(biāo)識(shí)和定位模塊。通過模塊標(biāo)識(shí)符，Webpack 能夠正確地將模塊的導(dǎo)出內(nèi)容提供給其他模塊。 3.模塊的哈希計(jì)算：當(dāng)使用緩存和長期緩存（Long Term Caching）功能時(shí)，Webpack 使用模塊標(biāo)識(shí)符來計(jì)算模塊的哈希值。這樣，當(dāng)模塊內(nèi)容發(fā)生變化時(shí)，它的哈希值會(huì)改變，從而觸發(fā)緩存的更新或生成新的文件名。
柚子快報(bào)激活碼778899分享：webpack學(xué)習(xí)-6.緩存
推薦閱讀
本文內(nèi)容根據(jù)網(wǎng)絡(luò)資料整理，出于傳遞更多信息之目的，不代表金鑰匙跨境贊同其觀點(diǎn)和立場。
轉(zhuǎn)載請(qǐng)注明，如有侵權(quán)，聯(lián)系刪除。
Spreets分享外貿(mào)惠
