国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

webpack- hash chunkhash contenthash

YorkChen / 1239人閱讀

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

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

一：為什么我們需要hash？

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

怎么解決上述的問(wèn)題呢？一般就是我們要主動(dòng)告訴瀏覽器要不要讀取緩存。舉個(gè)例子，我們的index.html文件里面引用了一個(gè)index.js文件，用戶每次請(qǐng)求index.js會(huì)按照瀏覽器的緩存機(jī)制去決定要不要讀取緩存。但是，如果是index.js?v=1，那么這種情況下，瀏覽器就不會(huì)去讀取緩存，能保證這次請(qǐng)求一定是從服務(wù)器上讀取的最新的index.js文件。

說(shuō)回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之后，我們可能會(huì)得到類似于：index.94f49d9b5ee809be277c.js 和 main.4afbc09e2f228ea4bc2f.js的文件。前面我們說(shuō)到，Webpack里面有三種hash，分別是：hash, chunkhash, contenthash，接下來(lái)我們來(lái)看看三者的區(qū)別以及使用場(chǎng)景。

二：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)目級(jí)別的，他的缺點(diǎn)是假如我只改了其中一個(gè)文件，但是所有文件的文件名里面的hash都是一樣的。這樣會(huì)導(dǎo)致本來(lái)應(yīng)該被瀏覽器緩存的文件，強(qiáng)制要去服務(wù)器讀取一遍，但是這個(gè)文件又和之前的舊文件并沒有區(qū)別，這樣就很不好了。那能不能做到只有改變了文件，hash值才變，而沒有改變的文件，文件名里面的hash值就不變呢？答案就是chunkhash。
三：chunkhash
chunkhash是針對(duì)entry的每一個(gè)入口文件，獨(dú)立的hash。如果entry里面的其中一個(gè)文件內(nèi)容改變，只會(huì)改變這個(gè)入口文件build之后的文件名，而不會(huì)影響到其他文件。

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,得到：

我們改動(dòng)一下./src/main.js文件的內(nèi)容，但是不修改./src/index.js，再執(zhí)行一次npm run build,得到：

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

四：contenthash

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/104147.html

相關(guān)文章

  • webpack4 的生產(chǎn)環(huán)境優(yōu)化

    摘要：的生產(chǎn)環(huán)境優(yōu)化完整配置的可以參考本文主要介紹了生產(chǎn)環(huán)境我都做了哪些優(yōu)化文章的結(jié)構(gòu)如下靜態(tài)資源路徑。分配不同的關(guān)于穩(wěn)定性的坑注意區(qū)分整個(gè)項(xiàng)目有變動(dòng)時(shí)，變化。而生產(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)...

    bang590 評(píng)論0 收藏0

  • 深入理解 Webpack 打包分塊（上）

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

    Rocko 評(píng)論0 收藏0

  • Webpack4 搭建 Vue 項(xiàng)目

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

    2shou 評(píng)論0 收藏0

  • webpack多頁(yè)應(yīng)用架構(gòu)系列（十六）：善用瀏覽器緩存，該去則去，該留則留

    摘要：瀏覽器緩存簡(jiǎn)單介紹下面來(lái)簡(jiǎn)單介紹一下瀏覽器緩存，以及為何我要在標(biāo)題中強(qiáng)調(diào)該去則去，該留則留。但后來(lái)我還是反轉(zhuǎn)了自己，這種方法雖然能留下瀏覽器緩存，卻做不到該去則去。 本文首發(fā)于Array_Huang的技術(shù)博客——實(shí)用至上，非經(jīng)作者同意，請(qǐng)勿轉(zhuǎn)載。原文地址：https://segmentfault.com/a/1190000010317802如果您對(duì)本系列文章感興趣，歡迎關(guān)注訂閱這里：h...

    pekonchan 評(píng)論0 收藏0

  • webpack多頁(yè)應(yīng)用架構(gòu)系列（十六）：善用瀏覽器緩存，該去則去，該留則留

    摘要：瀏覽器緩存簡(jiǎn)單介紹下面來(lái)簡(jiǎn)單介紹一下瀏覽器緩存，以及為何我要在標(biāo)題中強(qiáng)調(diào)該去則去，該留則留。但后來(lái)我還是反轉(zhuǎn)了自己，這種方法雖然能留下瀏覽器緩存，卻做不到該去則去。 本文首發(fā)于Array_Huang的技術(shù)博客——實(shí)用至上，非經(jīng)作者同意，請(qǐng)勿轉(zhuǎn)載。原文地址：https://segmentfault.com/a/1190000010317802如果您對(duì)本系列文章感興趣，歡迎關(guān)注訂閱這里：h...

    娣辯孩 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<