環(huán)境準(zhǔn)備
因?yàn)闉g覽器緩存這一塊相對于前面的講解較獨(dú)立氛改，所以我們重新搭建一下業(yè)務(wù)代碼帐萎，并對webpack配置做簡單的修改
// index.js
import _ from 'lodash'
import $ from 'jquery'
const dom = $('div')
dom.html(_.join(['hello', 'world'], ' '))
$('body').append(dom)
這個(gè)時(shí)候執(zhí)行打包呢，控制臺(tái)會(huì)報(bào)一些警告胜卤，我們可以在webpack.common配置中將performance設(shè)為false疆导，可以看下官網(wǎng)這個(gè)參數(shù)的意思哈，其實(shí)就是關(guān)于打包性能的葛躏，我們可以自定義一些警告的閾值澈段，另外我們?yōu)榱吮苊飧蓴_悠菜，暫時(shí)將production模式下的source map關(guān)掉，然后執(zhí)行打包败富，生成如下目錄
|--dist
|--index.html
|--main.js
|--vendors~main.chunk.js
然后我們配置splitChunks.cacheGroups.vendors為
vendors: {
test: /[\\/]node_modules[\\/]/,
priority: -10,
name: 'vendors'
}
再打包生成如下目錄
|--dist
|--index.html
|--main.js
|--vendors.chunk.js
上面的配置都講過悔醋，可以回顧一下，這樣我們就把準(zhǔn)備環(huán)境搭建起來了兽叮。
瀏覽器緩存
我們最終打包出來的文件是要放到服務(wù)器上的芬骄，現(xiàn)在我們先在本地運(yùn)行一下打包好的index.html,打開network做監(jiān)控，會(huì)發(fā)現(xiàn)當(dāng)運(yùn)行頁面時(shí)會(huì)加載下面這樣的資源
我們加載頁面后鹦聪，會(huì)加載兩個(gè)js文件账阻，當(dāng)我們再次刷新頁面的時(shí)候，其實(shí)這兩個(gè)js文件已被保存在緩存里了泽本，我們是取的緩存
假設(shè)淘太，現(xiàn)在修改了js源代碼，重新做了打包规丽，再次放到服務(wù)器上運(yùn)行蒲牧，那么我們做普通頁面刷新（區(qū)別于強(qiáng)制刷新），看到的將還是舊代碼赌莺，因?yàn)槲覀兊奈募侄紱]有變化冰抢，再次訪問還是會(huì)從緩存里面取，這就存在了問題雄嚣，為了解決這一問題晒屎，我們引入下面的概念
content Hash
我們將output中的filename和chunkFilename分別提取到dev和prod配置中，其中本地的還取原來的值就可以缓升，因?yàn)楸镜匚覀兠看味际菃为?dú)打包單獨(dú)運(yùn)行鼓鲁，包括熱模塊更新都會(huì)幫我們解決瀏覽器的緩存問題，但是生產(chǎn)模式下使我們需要解決的港谊，我們將其配置成下面這樣
output: {
filename: '[name].[contenthash].js',
chunkFilename: '[name].[contenthash].js'
}
其中的contentHash和name一樣是一個(gè)出口的占位符骇吭，其含義顧明思義是當(dāng)文件內(nèi)容改變才發(fā)生改變，他是根據(jù)'content'生成的一個(gè)hash字符串歧寺，我們先來打包試試
我們可以看到哈燥狰，生成的文件中，假如了hash字符串這樣的內(nèi)容斜筐，我們剛才說只要文件內(nèi)容不變龙致，那么hash就不會(huì)變，下面我們驗(yàn)證一下顷链，我們不改變文件內(nèi)容目代，直接打包，這時(shí)候?qū)Ρ壬洗蔚膆ash，發(fā)現(xiàn)并沒有變化榛了，這就意味我們我們不改變源代碼直接打包上線在讶，文件名不發(fā)生變化，是會(huì)取緩存的霜大。
下面我們對源代碼做一下改變,然后重新打包构哺，我們發(fā)現(xiàn)，main的hash變了战坤，但是vendors的hsah沒有變化曙强，因?yàn)槲覀兊膙endors里面放置的lodash和jquery兩個(gè)庫，這兩個(gè)庫沒有變化湖笨，所以他的hash也不會(huì)變旗扑，這時(shí)候如果做代碼上線蹦骑，我們就會(huì)對main.js做重新加載慈省，而對vendors取本地緩存
contentHash這種形式，可以做到眠菇，重新打包代碼上線的時(shí)候边败，用戶只更新有變化的代碼，沒有變化的代碼用戶可以直接用本地緩存
對于老版本webapck V4
如果你使用的webpack4的版本比較老捎废，可能會(huì)出現(xiàn)即使你沒有修改文件內(nèi)容笑窜，但hash依然改變的情況，為解決這以問題登疗，你需要在optimization中配置runtimeChunk
runtimeChunk: {
name: 'runtime'
}
這樣打包的內(nèi)容不變hash就不會(huì)變了排截，但這時(shí)候會(huì)新生成一個(gè)runtime.js的文件，這是因?yàn)?/p>
manifest
我們已經(jīng)知道辐益，業(yè)務(wù)代碼存在于main中断傲，第三方庫代碼存在于vendors中，但是庫和業(yè)務(wù)邏輯之間也是有關(guān)聯(lián)的智政，這個(gè)關(guān)聯(lián)就是manifest认罩，默認(rèn)manifest是存在于main也存在于vendors中的，在不同版本的webapck中续捂，manifest可能有差異垦垂，（可能存在content不改變改變manifest改變，從而影響其他文件改變）這就導(dǎo)致了上面出現(xiàn)的牙瓢，舊版本webpack4中劫拗，即使沒有改變content，hash也會(huì)改變矾克。當(dāng)我們配置了runtimeChunk就會(huì)吧manifest中的代碼提出來到runtime.js中页慷，這樣的話，main和vendors相對獨(dú)立一點(diǎn)，就不會(huì)出現(xiàn)上面的問題了差购。當(dāng)然了四瘫，新版本的webpack也是可以配置的，大家不放試一試欲逃，不過新版本可以不用配置找蜜。
總結(jié)
這節(jié)簡單講了講webpack和瀏覽器緩存之間的關(guān)系，講解了contenthash的意義和用法稳析，同時(shí)也將了關(guān)于舊版本webapck中處理方式洗做，其實(shí)對于最新版本的webpack來說，是不用太多配置的彰居，大家知道如何處理老版本的問題后诚纸，還是建議把webpack版本升到最新~這樣就能享受更多的API了。
