如何用vite打包解決前端發(fā)版后瀏覽器緩存問(wèn)題
更新時(shí)間：2024年11月28日 10:05:37 作者：樹枝是天空的根
這篇文章主要介紹了如何用vite打包解決前端發(fā)版后瀏覽器緩存問(wèn)題的相關(guān)資料,這樣的配置能夠有效避免瀏覽器緩存問(wèn)題,確保瀏覽器每次都能加載最新的代碼,同時(shí)又不影響第三方庫(kù)的緩存效果,需要的朋友可以參考下
如何避免瀏覽器緩存問(wèn)題，保證每次發(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í)間戳
},
}
}
});
通過(guò)設(shè)置 chunkFileNames 和 entryFileNames 函數(shù)，根據(jù)文件名是否為第三方庫(kù)來(lái)動(dòng)態(tài)設(shè)置輸出文件的文件名。對(duì)于第三方庫(kù)，不添加時(shí)間戳，確保其文件名穩(wěn)定；而對(duì)于自定義文件，則使用時(shí)間戳保證每次構(gòu)建生成的文件名都具有唯一性。這樣的配置能夠有效避免瀏覽器緩存問(wèn)題，確保瀏覽器每次都能加載最新的代碼，同時(shí)又不影響第三方庫(kù)的緩存效果。
總結(jié)
到此這篇關(guān)于如何用vite打包解決前端發(fā)版后瀏覽器緩存問(wèn)題的文章就介紹到這了,更多相關(guān)vite打包解決前端瀏覽器緩存內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue接入ts基本方法，關(guān)于ts，也出了很久，下面我們就來(lái)簡(jiǎn)單學(xué)習(xí)了下ts并且在原有項(xiàng)目上接入基本ts語(yǔ)法，也算是一個(gè)初級(jí)嘗試，簡(jiǎn)單梳理下基礎(chǔ)的接入配置和已經(jīng)遇到的問(wèn)題，供需要的小伙伴們參考2022-01-01
介紹了如何在Vue項(xiàng)目中使用Axios封裝請(qǐng)求、配置攔截器,并在api.js中統(tǒng)一管理API接口,同時(shí),也講解了如何在vite.config.js中配置解決跨域問(wèn)題,這些操作可以優(yōu)化前端代碼結(jié)構(gòu),提高開(kāi)發(fā)效率2024-09-09
這篇文章主要介紹了Vue2.x-使用防抖以及節(jié)流的示例，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-03-03
在本篇文章里小編給大家整理的是一篇關(guān)于Vue中的常用指令及用法總結(jié)內(nèi)容，對(duì)此有興趣的朋友們可以跟著學(xué)習(xí)下。2022-01-01
vue構(gòu)建單頁(yè)面應(yīng)用實(shí)戰(zhàn)
本篇文章主要介紹了vue構(gòu)建單頁(yè)面應(yīng)用實(shí)戰(zhàn)，使用 SPA，沒(méi)有頁(yè)面切換，就沒(méi)有白屏阻塞，可以大大提高 H5 的性能，達(dá)到接近原生的流暢體驗(yàn)。2017-04-04
這篇文章主要介紹了Vuex入門學(xué)習(xí)之Getter詳解,Vuex 允許我們?cè)?nbsp;store 中定義 getter(可以認(rèn)為是 store 的計(jì)算屬性),就像計(jì)算屬性一樣,getter 的返回值會(huì)根據(jù)它的依賴被緩存起來(lái),且只有當(dāng)它的依賴值發(fā)生了改變才會(huì)被重新計(jì)算,需要的朋友可以參考下2023-11-11
Vue3使用vuedraggable實(shí)現(xiàn)拖拽排序功能實(shí)例代碼
vuedraggable是一個(gè)基于Sortable.js的Vue.js拖拽排序插件,提供簡(jiǎn)單、靈活且強(qiáng)大的拖拽功能,支持Vue2和Vue3,這篇文章主要介紹了Vue3使用vuedraggable實(shí)現(xiàn)拖拽排序功能的相關(guān)資料,需要的朋友可以參考下2026-02-02
Vue3實(shí)現(xiàn)動(dòng)態(tài)導(dǎo)入Excel表格數(shù)據(jù)的方法詳解
在開(kāi)發(fā)工作過(guò)程中，我們會(huì)遇到各種各樣的表格數(shù)據(jù)導(dǎo)入，動(dòng)態(tài)數(shù)據(jù)導(dǎo)入可以減少人為操作，減少出錯(cuò)。本文為大家介紹了Vue3實(shí)現(xiàn)動(dòng)態(tài)導(dǎo)入Excel表格數(shù)據(jù)的方法，需要的可以參考一下2022-11-11
這篇文章主要介紹了vue elementui上傳圖片限制格式、大小和尺寸方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
vue3組合式API實(shí)現(xiàn)todo列表效果
這篇文章主要介紹了vue3組合式API實(shí)現(xiàn)todo列表,下面用組合式?API的寫法,實(shí)現(xiàn)一個(gè)可新增、刪除的todo列表效果,需要的朋友可以參考下2024-08-08