前言
有沒有這么一種場景，項目上線后，客戶使用過程中發(fā)現(xiàn)了bug，你急急忙忙改完，發(fā)布。但你發(fā)布后
測試人員或者客戶會說：“你這改了沒用啊”。
你：“清下緩存試試”
客戶：“？？？？”
那么這篇文章帶你認識瀏覽器緩存，及清除瀏覽器的緩存辦法。讓你不再為了緩存而煩惱！！
瀏覽器緩存
眾所周知任何網(wǎng)頁第一次打開和后面打開的速度是不一樣的，如果前端沒有做路由懶加載，那么會加載很多資源。但后續(xù)加載就會很快，這其中就是瀏覽器緩存的好處
緩存帶來的好處
- 提高網(wǎng)頁加載速度，減少響應時間
- 緩解服務器壓力
- 減少帶寬消耗
強緩存和協(xié)商緩存
強緩存（本地緩存）
不會向服務器發(fā)送請求，直接從緩存中讀取資源，強緩存可以通過設置兩種 HTTP Header 實現(xiàn)：Expires 和 Cache-Control
- Expires 緩存過期時間，用來指定資源到期的時間，是服務器端具體的時間點
是 HTTP/1 的產(chǎn)物，受限于本地時間，如果修改了本地時間，可能會造成緩存失效 - Cache-Control HTTP/1.1 的產(chǎn)物，比如當設置Cache-Control:max-age=300，單位是s，代表5分鐘內(nèi)再次請求就會走強緩存
協(xié)商緩存
當瀏覽器對某個資源的請求沒有命中強緩存，就會發(fā)一個請求到服務器，驗證協(xié)商緩存是否命中，如果協(xié)商緩存命中，請求響應返回的HTTP狀態(tài)為304 (Not Modified)，該請求不攜帶實體數(shù)據(jù)，若未命中，則返回200并攜帶資源實體數(shù)據(jù)。協(xié)商緩存是利用的是Last-Modified，If-Modified-Since和ETag、If-None-Match這兩對Header來管理的
清除瀏覽器緩存的方式:配置webpack打包輸出文件名
先來看看打包差異對比圖
第一次打包：未配置
第二次打包：未配置
第一次打包：配置過后
第二次打包：配置過后
附上主要配置代碼文章來源：http://www.zghlxwxcb.cn/news/detail-492858.html
const { defineConfig } = require('@vue/cli-service')
const timestamp = new Date().getTime()
module.exports = defineConfig({
configureWebpack: {
output: {
// 修改輸出js目錄名及文件名
filename: `js/[name]-test-${timestamp}.js`,
chunkFilename: `js/[name]-test-${timestamp}.js`,
},
},
})
總結(jié)
由此可見，沒配置過的webpack輸出文件名，每次打包產(chǎn)生的文件是一樣的，所以瀏覽器緩存以為還是之前的js文件，就直接從緩存獲取，在項目中配置webpack打包輸出文件名還是很有必要的，是杜絕發(fā)布后存在的緩存問題的最有效方式，知道了配置的原理，vite配置原理也是一樣，自行查配置文章來源地址http://www.zghlxwxcb.cn/news/detail-492858.html
到了這里，關(guān)于細說前端打包發(fā)布后，瀏覽器緩存如何清理？其實只需要簡單的webpack配置就行的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
