資訊專欄INFORMATION COLUMN
摘要：但是，如果是，那么這種情況下，瀏覽器就不會去讀取緩存，能保證這次請求一定是從服務(wù)器上讀取的最新的文件。三是針對的每一個入口文件，獨(dú)立的。如果里面的其中一個文件內(nèi)容改變，只會改變這個入口文件之后的文件名，而不會影響到其他文件。
Webpack里面有三種hash，分別是：hash, chunkhash, contenthash.在我們嘗試去區(qū)分他們仨之前，先來看看為什么我們需要hash。
一：為什么我們需要hash？
大家都知道我們的瀏覽器會緩存我們的文件。緩存是把雙刃劍，好處是瀏覽器讀取緩存的文件，能帶來更佳的用戶體驗(yàn)（不需要額外流量，速度更快）；壞處是有時候我們修改了文件內(nèi)容，但是瀏覽器依然讀取緩存的文件（也就是舊文件），導(dǎo)致用戶看到的文件不是最新的。
怎么解決上述的問題呢？一般就是我們要主動告訴瀏覽器要不要讀取緩存。舉個例子，我們的index.html文件里面引用了一個index.js文件，用戶每次請求index.js會按照瀏覽器的緩存機(jī)制去決定要不要讀取緩存。但是，如果是index.js?v=1，那么這種情況下，瀏覽器就不會去讀取緩存，能保證這次請求一定是從服務(wù)器上讀取的最新的index.js文件。
說回webpack，webpack提供一種在文件名里面嵌入hash的方式，每次打包都生成新的文件名，例如：
const path = require("path");
module.exports = {
entry: {
index: "./src/index.js",
main: "./src/main.js"
},
output: {
path: path.resolve(__dirname, "dist"),
filename: "[name].[chunkhash].js",
}
}
上面的代碼，build之后，我們可能會得到類似于：index.94f49d9b5ee809be277c.js 和 main.4afbc09e2f228ea4bc2f.js的文件。前面我們說到，Webpack里面有三種hash，分別是：hash, chunkhash, contenthash，接下來我們來看看三者的區(qū)別以及使用場景。
二：hash
const path = require("path");
module.exports = {
entry: {
index: "./src/index.js",
main: "./src/main.js"
},
output: {
path: path.resolve(__dirname, "dist"),
filename: "[name].[hash].js",
}
}
我們執(zhí)行npm run build之后得到：
大家從圖上可以看到index.js和main.js文件的hash是一樣的。hash是項(xiàng)目級別的，他的缺點(diǎn)是假如我只改了其中一個文件，但是所有文件的文件名里面的hash都是一樣的。這樣會導(dǎo)致本來應(yīng)該被瀏覽器緩存的文件，強(qiáng)制要去服務(wù)器讀取一遍，但是這個文件又和之前的舊文件并沒有區(qū)別，這樣就很不好了。那能不能做到只有改變了文件，hash值才變，而沒有改變的文件，文件名里面的hash值就不變呢？答案就是chunkhash。
三：chunkhash
chunkhash是針對entry的每一個入口文件，獨(dú)立的hash。如果entry里面的其中一個文件內(nèi)容改變，只會改變這個入口文件build之后的文件名，而不會影響到其他文件。
const path = require("path");
module.exports = {
entry: {
index: "./src/index.js",
main: "./src/main.js"
},
output: {
path: path.resolve(__dirname, "dist"),
filename: "[name].[chunkhash].js",
}
}
我們執(zhí)行一次npm run build,得到：
我們改動一下./src/main.js文件的內(nèi)容，但是不修改./src/index.js，再執(zhí)行一次npm run build,得到：
對比以上2張圖可以看出來index.js文件的hash值沒有改變，但是main.js的hash值改變了。
四：contenthash
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/104147.html
摘要：的生產(chǎn)環(huán)境優(yōu)化完整配置的可以參考本文主要介紹了生產(chǎn)環(huán)境我都做了哪些優(yōu)化文章的結(jié)構(gòu)如下靜態(tài)資源路徑。分配不同的關(guān)于穩(wěn)定性的坑注意區(qū)分整個項(xiàng)目有變動時，變化。而生產(chǎn)環(huán)境可以這一項(xiàng)，因?yàn)槲覀儾恍枰谏a(chǎn)環(huán)境調(diào)試代碼。 webpack4 的生產(chǎn)環(huán)境優(yōu)化 webpack4完整配置的可以參考： https://github.com/ziwei3749/... 本文主要介紹了 webpack4 生產(chǎn)...
摘要：而一個哈希字符串就是根據(jù)文件內(nèi)容產(chǎn)生的簽名，每當(dāng)文件內(nèi)容發(fā)生更改時，哈希串也就發(fā)生了更改，文件名也就隨之更改。很顯然這不是我們需要的，如果文件內(nèi)容發(fā)生了更改，的打包文件的哈希應(yīng)該發(fā)生變化，但是不應(yīng)該。前言 隨著前端代碼需要處理的業(yè)務(wù)越來越繁重，我們不得不面臨的一個問題是前端的代碼體積也變得越來越龐大。這造成無論是在調(diào)式還是在上線時都需要花長時間等待編譯完成，并且用戶也不得不花額外的時間和帶寬...
摘要：前言由于打包工具的影響，也追求零配置搭建項(xiàng)目。本文就帶你繞過，用一步步搭建項(xiàng)目。解決文件中引入的文件名因變動而變動的問題項(xiàng)目源碼 1. 前言 由于 Parcel 打包工具的影響，webpack4 也追求零配置搭建項(xiàng)目。而前陣子出現(xiàn)的 vue-cli 3.0也是基于 webpack4 零配置的思想創(chuàng)建的。對于一些習(xí)慣webpack3 的開發(fā)者難免有些不習(xí)慣。本文就帶你繞過 vue-cli...
摘要：瀏覽器緩存簡單介紹下面來簡單介紹一下瀏覽器緩存，以及為何我要在標(biāo)題中強(qiáng)調(diào)該去則去，該留則留。但后來我還是反轉(zhuǎn)了自己，這種方法雖然能留下瀏覽器緩存，卻做不到該去則去。 本文首發(fā)于Array_Huang的技術(shù)博客——實(shí)用至上，非經(jīng)作者同意，請勿轉(zhuǎn)載。原文地址：https://segmentfault.com/a/1190000010317802如果您對本系列文章感興趣，歡迎關(guān)注訂閱這里：h...
摘要：瀏覽器緩存簡單介紹下面來簡單介紹一下瀏覽器緩存，以及為何我要在標(biāo)題中強(qiáng)調(diào)該去則去，該留則留。但后來我還是反轉(zhuǎn)了自己，這種方法雖然能留下瀏覽器緩存，卻做不到該去則去。 本文首發(fā)于Array_Huang的技術(shù)博客——實(shí)用至上，非經(jīng)作者同意，請勿轉(zhuǎn)載。原文地址：https://segmentfault.com/a/1190000010317802如果您對本系列文章感興趣，歡迎關(guān)注訂閱這里：h...
閱讀 2961·2021-11-24 09:39
閱讀 3269·2021-11-19 10:00
閱讀 1610·2021-10-27 14:17
閱讀 1888·2021-10-14 09:43
閱讀 1048·2021-09-03 10:30
閱讀 3486·2019-08-30 15:54
閱讀 2818·2019-08-30 13:05
閱讀 2108·2019-08-30 11:02
