webpack- hash chunkhash contenthash

YorkChen 發布于2019-08-23 17:18 / 1214人閱讀

摘要：但是，如果是，那么這種情況下，瀏覽器就不會去讀取緩存，能保證這次請求一定是從服務器上讀取的最新的文件。三是針對的每一個入口文件，獨立的。如果里面的其中一個文件內容改變，只會改變這個入口文件之后的文件名，而不會影響到其他文件。

Webpack里面有三種hash，分別是：hash, chunkhash, contenthash.在我們嘗試去區分他們仨之前，先來看看為什么我們需要hash。

一：為什么我們需要hash？

大家都知道我們的瀏覽器會緩存我們的文件。緩存是把雙刃劍，好處是瀏覽器讀取緩存的文件，能帶來更佳的用戶體驗（不需要額外流量，速度更快）；壞處是有時候我們修改了文件內容，但是瀏覽器依然讀取緩存的文件（也就是舊文件），導致用戶看到的文件不是最新的。

怎么解決上述的問題呢？一般就是我們要主動告訴瀏覽器要不要讀取緩存。舉個例子，我們的index.html文件里面引用了一個index.js文件，用戶每次請求index.js會按照瀏覽器的緩存機制去決定要不要讀取緩存。但是，如果是index.js?v=1，那么這種情況下，瀏覽器就不會去讀取緩存，能保證這次請求一定是從服務器上讀取的最新的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，接下來我們來看看三者的區別以及使用場景。

二：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",
    }
}

我們執行npm run build之后得到：

大家從圖上可以看到index.js和main.js文件的hash是一樣的。hash是項目級別的，他的缺點是假如我只改了其中一個文件，但是所有文件的文件名里面的hash都是一樣的。這樣會導致本來應該被瀏覽器緩存的文件，強制要去服務器讀取一遍，但是這個文件又和之前的舊文件并沒有區別，這樣就很不好了。那能不能做到只有改變了文件，hash值才變，而沒有改變的文件，文件名里面的hash值就不變呢？答案就是chunkhash。
三：chunkhash
chunkhash是針對entry的每一個入口文件，獨立的hash。如果entry里面的其中一個文件內容改變，只會改變這個入口文件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",
    }
}

我們執行一次npm run build,得到：

我們改動一下./src/main.js文件的內容，但是不修改./src/index.js，再執行一次npm run build,得到：

對比以上2張圖可以看出來index.js文件的hash值沒有改變，但是main.js的hash值改變了。

四：contenthash

GPU云服務器云服務器 chunkhash contenthash Hashes Hash

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/104147.html

webpack4 的生產環境優化

摘要：的生產環境優化完整配置的可以參考本文主要介紹了生產環境我都做了哪些優化文章的結構如下靜態資源路徑。分配不同的關于穩定性的坑注意區分整個項目有變動時，變化。而生產環境可以這一項，因為我們不需要在生產環境調試代碼。 webpack4 的生產環境優化 webpack4完整配置的可以參考： https://github.com/ziwei3749/... 本文主要介紹了 webpack4 生產...

bang590 2019-08-23 10:34 評論0 收藏0
深入理解 Webpack 打包分塊（上）

摘要：而一個哈希字符串就是根據文件內容產生的簽名，每當文件內容發生更改時，哈希串也就發生了更改，文件名也就隨之更改。很顯然這不是我們需要的，如果文件內容發生了更改，的打包文件的哈希應該發生變化，但是不應該。前言隨著前端代碼需要處理的業務越來越繁重，我們不得不面臨的一個問題是前端的代碼體積也變得越來越龐大。這造成無論是在調式還是在上線時都需要花長時間等待編譯完成，并且用戶也不得不花額外的時間和帶寬...

Rocko 2019-05-21 16:11 評論0 收藏0
Webpack4 搭建 Vue 項目

摘要：前言由于打包工具的影響，也追求零配置搭建項目。本文就帶你繞過，用一步步搭建項目。解決文件中引入的文件名因變動而變動的問題項目源碼 1. 前言由于 Parcel 打包工具的影響，webpack4 也追求零配置搭建項目。而前陣子出現的 vue-cli 3.0也是基于 webpack4 零配置的思想創建的。對于一些習慣webpack3 的開發者難免有些不習慣。本文就帶你繞過 vue-cli...

2shou 2019-08-23 11:55 評論0 收藏0
webpack多頁應用架構系列（十六）：善用瀏覽器緩存，該去則去，該留則留

摘要：瀏覽器緩存簡單介紹下面來簡單介紹一下瀏覽器緩存，以及為何我要在標題中強調該去則去，該留則留。但后來我還是反轉了自己，這種方法雖然能留下瀏覽器緩存，卻做不到該去則去。本文首發于Array_Huang的技術博客——實用至上，非經作者同意，請勿轉載。原文地址：https://segmentfault.com/a/1190000010317802如果您對本系列文章感興趣，歡迎關注訂閱這里：h...

pekonchan 2019-08-06 13:24 評論0 收藏0
webpack多頁應用架構系列（十六）：善用瀏覽器緩存，該去則去，該留則留

摘要：瀏覽器緩存簡單介紹下面來簡單介紹一下瀏覽器緩存，以及為何我要在標題中強調該去則去，該留則留。但后來我還是反轉了自己，這種方法雖然能留下瀏覽器緩存，卻做不到該去則去。本文首發于Array_Huang的技術博客——實用至上，非經作者同意，請勿轉載。原文地址：https://segmentfault.com/a/1190000010317802如果您對本系列文章感興趣，歡迎關注訂閱這里：h...

娣辯孩 2019-08-20 18:16 評論0 收藏0