核心是“内容变则路径变”，用contenthash生成带内容指纹的文件名，确保js/css/图片内容变更时文件名自动更新；vue cli需配置[contenthash:8]，vite默认支持但public目录文件不参与哈希；静态资源配immutable长期缓存，index.html必须禁用强缓存。
核心是“内容变则路径变”，让浏览器自然加载新资源，而不是靠清缓存或强制刷新。
用 contenthash 生成带内容指纹的文件名
Webpack（Vue CLI）和 Vite 都默认支持基于文件内容生成哈希值，确保只要代码、样式或图片内容有改动，输出的文件名就会变化：
- Vue CLI：在 vue.config.js 中确认
filename和chunkFilename含[contenthash:8]，例如js/app.[contenthash:8].js - Vite：默认开启，构建后 JS/CSS 文件自动带 hash，如
index.e9a2f3b4.js；如需调整，可在 vite.config.ts 的build.rollupOptions.output中配置 - 注意：public 目录下的文件（如 favicon.ico、robots.txt）不参与哈希，它们原样复制，适合放无需版本控制的静态资源
服务端配强缓存头，但 index.html 除外
静态资源（JS/CSS/图片等）可设长期缓存，而 HTML 入口必须禁用强缓存，否则用户永远看不到新资源引用：
- 对
/assets/或/static/路径，返回Cache-Control: public, immutable, max-age=31536000（即 1 年） - 对
index.html，返回Cache-Control: no-cache或max-age=0, must-revalidate，强制每次请求都校验 - Nginx 示例：
location /assets {<br> expires 1y;<br> add_header Cache-Control "public, immutable";<br>}
利用协商缓存提升验证效率
即使设了 long-term cache，浏览器仍可能发条件请求（如带 If-None-Match）来确认资源是否变更。配合 ETag 或 Last-Modified 可减少传输量：
- Webpack 构建产物默认支持 ETag（由文件内容决定），无需额外配置
- 服务端（如 Nginx）启用
etag on;即可生效 - 当资源未变时，服务器返回
304 Not Modified，不传正文，节省带宽
路由与组件级缓存协同使用
静态资源缓存解决的是“文件更新同步”问题，而组件缓存（如 KeepAlive）解决的是“用户交互体验”问题，二者互补：
- 用
<keepalive></keepalive>缓存标签页、表单页等高频切换的组件，保留状态和滚动位置 - 配合
include/exclude精确控制哪些组件进缓存，避免内存堆积 - 被缓存组件可用
onActivated和onDeactivated做数据拉取或清理，比如进入时刷新列表、离开时暂停轮询
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
