“西西人艺体777777”

目录

问题引出

解决方案

入口文件

设置版本号

静态资源

问题引出Web 前端如何优雅解决「版本更新与浏览器缓存冲突」问题实现更新必刷新缓存、未更则复用缓存的闭环管控同时满足配置简洁、维护成本低、适配纯静态前端项目的要求

解决方案本次以NextJS框架为例。

入口文件使用禁用浏览器缓存设置{/* 不使用浏览器缓存 */} meta httpEquivpragram contentno-cache / meta httpEquivcache-control contentno-cache, no-store, must-revalidate / meta httpEquivexpires content0 /

设置版本号需要设置你的版本号每次更新时修改此版本号Nextjs推荐在环境变量中设置# APP版本更新版本刷新浏览器缓存 NEXT_PUBLIC_APP_VERSION

1.

0.

静态资源统一使用?vapp_version:// 读取环境变量版本号 export const APP_VERSION process.env.NEXT_PUBLIC_APP_VERSION ||

1.

0; // 版本号拼接工具函数显式标注入参/返回值 export const withVersion (url: string): string { // 简单容错避免重复拼接?v可选提升鲁棒性 return url.includes(?v) ? url : ${url}?v${APP_VERSION}; };使用withVersion(图片/字体/js)什么时候用资源类型导入 / 使用方式是否需要手动加版本号原因全局 CSS模块化导入import /styles/global.css❌ 不需要Next.js 自动生成哈希后缀第三方静态 CSS如 iconfontlink relstylesheet hrefxxx.css /✅ 需要原生标签引入无自动版本化图片 / Icon/SVGImage srcxxx.png //img srcxxx.png /✅ 需要静态资源无自动版本化静态脚本 / 字体文件script srcxxx.js //link hrefxxx.woff2 /✅ 需要原生标签引入无自动版本化JS 模块import 导入import utils from /utils/xxx❌ 不需要Webpack/Next.js 自动分包并生成哈希next直接引入的会进行自动版本打包不需要我们配置versionscript等静态标签中的需要手动加如这种或路径引入的图片link relstylesheet href{withVersion(/fonts/iconfont/iconfont.css)} /img src{withVersion(/img/xxx.png)} altxxx /最终我们实现了在版本号未更新时使用浏览器缓存版本号更新时资源也会更新的效果。

美女被小头头咬视频大全集视频-美女被小头头咬视频大全集视频应用