如何用vite打包解決前端發(fā)版后瀏覽器緩存問題
更新時(shí)間：2024年11月28日 10:05:37 作者：樹枝是天空的根
這篇文章主要介紹了如何用vite打包解決前端發(fā)版后瀏覽器緩存問題的相關(guān)資料,這樣的配置能夠有效避免瀏覽器緩存問題,確保瀏覽器每次都能加載最新的代碼,同時(shí)又不影響第三方庫(kù)的緩存效果,需要的朋友可以參考下
如何避免瀏覽器緩存問題，保證每次發(fā)布新版本時(shí)瀏覽器都能加載最新的代碼
Vite 構(gòu)建工具的配置文件 vite.config.js：
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { resolve } from 'path';
import pkg from './package.json' assert { type: 'json' };
// 時(shí)間戳
const timestamp = new Date().getTime();
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'@': resolve(__dirname, 'src') // 將@配置為src目錄的絕對(duì)路徑
}
},
server: {
host: '0.0.0.0',
},
build: {
rollupOptions: {
output: {
manualChunks: {
vendor: Object.keys(pkg.dependencies),
},
chunkFileNames: ({ name }) => {
if (name === 'vendor') {
return `assets/js/[name]-[hash].js`; // 第三方庫(kù)不添加時(shí)間戳
} else {
return `assets/js/[name]-[hash]-${timestamp}.js`; // 自定義文件名，使用時(shí)間戳保證唯一性
}
},
entryFileNames: ({ name }) => {
if (name === 'vendor') {
return `assets/js/[name]-[hash].js`; // 第三方庫(kù)不添加時(shí)間戳
} else {
return `assets/js/[name]-[hash]-${timestamp}.js`; // 自定義文件名，使用時(shí)間戳保證唯一性
}
},
assetFileNames: `assets/[ext]/[name]-[hash].[ext]` // 資源文件添加時(shí)間戳
},
}
}
});
通過設(shè)置 chunkFileNames 和 entryFileNames 函數(shù)，根據(jù)文件名是否為第三方庫(kù)來動(dòng)態(tài)設(shè)置輸出文件的文件名。對(duì)于第三方庫(kù)，不添加時(shí)間戳，確保其文件名穩(wěn)定；而對(duì)于自定義文件，則使用時(shí)間戳保證每次構(gòu)建生成的文件名都具有唯一性。這樣的配置能夠有效避免瀏覽器緩存問題，確保瀏覽器每次都能加載最新的代碼，同時(shí)又不影響第三方庫(kù)的緩存效果。
總結(jié)
到此這篇關(guān)于如何用vite打包解決前端發(fā)版后瀏覽器緩存問題的文章就介紹到這了,更多相關(guān)vite打包解決前端瀏覽器緩存內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
解決element ui el-row el-col里面高度不一致問題
這篇文章主要介紹了解決element ui el-row el-col里面高度不一致問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
element?table數(shù)據(jù)量太大導(dǎo)致網(wǎng)頁卡死崩潰的解決辦法
當(dāng)頁面數(shù)據(jù)過多,前端渲染大量的DOM時(shí),會(huì)造成頁面卡死問題,下面這篇文章主要給大家介紹了關(guān)于element?table數(shù)據(jù)量太大導(dǎo)致網(wǎng)頁卡死崩潰的解決辦法,需要的朋友可以參考下2023-02-02
這篇文章主要為大家詳細(xì)介紹了Vue組件中的自定義事件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02
對(duì)vue中的input輸入框進(jìn)行郵箱驗(yàn)證方式
這篇文章主要介紹了對(duì)vue中的input輸入框進(jìn)行郵箱驗(yàn)證方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
Vue利用computer解決單項(xiàng)數(shù)據(jù)流的問題詳解
Vue 是一個(gè)非常流行和強(qiáng)大的前端框架，它讓我們可以用簡(jiǎn)潔和優(yōu)雅的方式來構(gòu)建用戶界面，今天我們來分享一個(gè) Vue 中非常經(jīng)典的問題，也是一個(gè)非常實(shí)用的技巧，希望對(duì)大家有所幫助2023-07-07
Ant?Design?Vue?Pagination分頁組件的封裝與使用
這篇文章主要介紹了Ant?Design?Vue?Pagination分頁組件的封裝與使用方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要介紹了使用vant?自定義彈框全過程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
nuxt實(shí)現(xiàn)封裝axios并且獲取token
這篇文章主要介紹了nuxt實(shí)現(xiàn)封裝axios并且獲取token,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要給大家介紹一下vue實(shí)現(xiàn)在頁面上添加水印的實(shí)例,文中有詳細(xì)的代碼示例供大家參考,具有一定的參考價(jià)值,感興趣的小伙伴跟著小編一起來看看吧2023-12-12
vue 路由緩存 路由嵌套 路由守衛(wèi) 監(jiān)聽物理返回操作
這篇文章主要介紹了vue 路由緩存 路由嵌套 路由守衛(wèi) 監(jiān)聽物理返回操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08