中國建筑工程人才網(wǎng)湖南有實(shí)力seo優(yōu)化
文章目錄
- 一、微信緩存是什么？
- 二、如何解決
- 1.打包入口文件解決
- 2.給請求url加時間戳
- 3.給打包的js文件添加時間戳并修改打包后的css文件夾
- 總結(jié)
一、微信緩存是什么？
微信緩存是指微信客戶端為了提高用戶的使用體驗(yàn)，會在用戶使用微信過程中將一些數(shù)據(jù)臨時存儲在本地，以便下次使用時能夠更快地加載數(shù)據(jù)，減少網(wǎng)絡(luò)請求和響應(yīng)速度，從而提高應(yīng)用程序的響應(yīng)速度和用戶體驗(yàn)。這些緩存數(shù)據(jù)可能包括聊天記錄、圖片、音頻、視頻等。但是過多的緩存數(shù)據(jù)會占用手機(jī)存儲空間，因此，定期清理微信緩存可以釋放空間，保持良好的手機(jī)性能。
二、如何解決
1.打包入口文件解決
找到mainfest.json 中的web配置(h5配置) 中模板路徑對應(yīng)的文件夾與自己根路徑下的文件夾名稱一致
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- 設(shè)置 meta 不緩存 --><meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"><meta http-equiv="Pragma" content="no-cache"><meta http-equiv="Expires" content="0"><script>var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') || CSS.supports('top: constant(a)'))document.write('<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' + (coverSupport ? ', viewport-fit=cover' : '') + '" />')</script><title>xxxxxxx</title><link rel="stylesheet" href="<%= BASE_URL %>static/index.<%= VUE_APP_INDEX_CSS_HASH %>.css" /></head><body><div id="app"></div></body>
</html><meta> 中3行代碼
上述代碼是在 HTML 的 `<head>` 標(biāo)簽中添加了一些 `<meta>` 標(biāo)簽來設(shè)置緩存控制的行為。下面對這些 `<meta>` 標(biāo)簽進(jìn)行解釋：1. `<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">`：- `http-equiv="Cache-Control"` 表示通過 HTTP 響應(yīng)頭來設(shè)置緩存控制。- `content="no-cache, no-store, must-revalidate"` 指示瀏覽器不要緩存頁面，并且每次請求都要向服務(wù)器驗(yàn)證是否有最新版本。這意味著每次用戶訪問該頁面時，瀏覽器都會發(fā)送一個請求到服務(wù)器，以確保獲取最新的頁面內(nèi)容。2. `<meta http-equiv="Pragma" content="no-cache">`：- `http-equiv="Pragma"` 同樣表示通過 HTTP 響應(yīng)頭來設(shè)置緩存控制。- `content="no-cache"` 指示瀏覽器不要緩存頁面。3. `<meta http-equiv="Expires" content="0">`：- `http-equiv="Expires"` 同樣表示通過 HTTP 響應(yīng)頭來設(shè)置緩存控制。- `content="0"` 表示設(shè)置過期時間為0，即告訴瀏覽器該頁面已經(jīng)過期，不應(yīng)該被緩存。通過以上 `<meta>` 標(biāo)簽設(shè)置，可以確保瀏覽器不會緩存頁面內(nèi)容，而是每次訪問都從服務(wù)器獲取最新的頁面。這在某些情況下比如網(wǎng)頁內(nèi)容會頻繁更新或者需要保持實(shí)時數(shù)據(jù)展示的場景下非常有用。
2.給請求url加時間戳
const BASE_URL = 'http://192.168.0.150:9999'
export default {request(options,time) {var timestamp = new Date().getTime();// 將時間戳添加到URL中options.url += (options.url.indexOf('?') >= 0 ? '&' : '?') + 'timestamp=' + timestamp;return new Promise((reslove, reject) => {let token = uni.getStorageSync('isLogin')let session = uni.getStorageSync('id')uni.request({url: BASE_URL + options.url,method: options.method || 'GET',timeout: 15000,data: options.data || {},// withCredentials: true, // 攜帶當(dāng)前站點(diǎn)的 cookie 信息header: options.header || {"X-Token": token,'session': session,'Cache-Control': 'no-store, no-cache, must-revalidate, max-age=0','Expires': '0'},success: (res) => {reslove(res.data)},fail: (err) => {console.log(err)},})})}
}上面代碼關(guān)鍵部分 必須要添加
var timestamp = new Date().getTime();
options.url += (options.url.indexOf('?') >= 0 ? '&' : '?') + 'timestamp=' + timestamp;
// 將時間戳添加到URL中'Cache-Control': 'no-store, no-cache, must-revalidate, max-age=0',
'Expires': '0'
//設(shè)置瀏覽器請求頭不緩存這樣做可以避免瀏覽器緩存請求結(jié)果，確保每次請求都是最新的數(shù)據(jù)
3.給打包的js文件添加時間戳并修改打包后的css文件夾
uniapp 打包 H5 生成的js文件，默認(rèn)情況下是不包含版本號以及時間戳后綴。這樣會導(dǎo)致H5新版打包上線后，用戶依舊使用的是微信中緩存的老版js文件。文件更新滯后等現(xiàn)象
根目錄創(chuàng)建 vue.config.js 有的話自己配置，沒有自己創(chuàng)建
let filePath = 'static/js/'; // 默認(rèn)文件路徑
let TimeStamp = new Date().getTime(); // 時間戳
let version = '-v1.0.0-'module.exports = {configureWebpack: {output: { // filePath: 路徑 name: 默認(rèn)文件名 Version: 版本號 TimeStamp: 時間戳; 重構(gòu)文件名filename: `${filePath}[name].${version}${TimeStamp}.js`,chunkFilename: `${filePath}[name].${version}${TimeStamp}.js`},},devServer: {}
}
打包完之后查看h5/static.js/js文件夾
chunk-vendors.-v600-1694394924921.js 都是這種類型
可以根據(jù)需求可控的添加時間和版本號，或者自定義相關(guān)后綴
然后在hbuilder中打包
打開打包后的路徑
1.點(diǎn)擊static 查看文件
2.點(diǎn)擊 h5下面的index.html
更改一下css文件路徑,與static下面的css文件路徑一致即可
總結(jié)
以上方法可以解決h5在微信中的緩存問題,升級時緩存問題倒解決了，但直接導(dǎo)致了用戶每次訪問你的程序時都要重新請求服務(wù)器，所有的靜態(tài)資源都無法用緩存了，浪費(fèi)流量，網(wǎng)絡(luò)壓力變大。
我們真正需要解決的問題，不是單純的要緩存或者不要緩存，而是期望視情況而定：
程序每次升級后，用戶都不會因?yàn)榫彺鎲栴}而執(zhí)行的仍然是老的程序。
若程序沒升級，用戶對靜態(tài)資源的請求則能用到緩存。