通过contenthash实现单文件级别缓存更新，即文件内容变则输出名中的hash变，不变则hash不变；Webpack需配置output.filename含[contenthash:24]、optimization.moduleIds设为'deterministic'、splitChunks分离vendor/runtime，HtmlWebpackPlugin自动注入；Vite默认启用contenthash，可显式设entryFileNames为assets/[name].[hash:24].js并避免sourcemap干扰；服务端需对JS/CSS设长缓存、HTML设短缓存或no-cache，CDN按路径差异化缓存，且禁止服务器压缩重写静态资源。
![浏览器缓存中如何通过webpack/vite配置文件的 [contenthash] 命名输出物来实现单文件级别的缓存大更新](https://img.php.cn/upload/article/001/242/473/178495505535495.png)
通过 [contenthash] 实现单文件级别缓存更新，核心在于让每个资源文件的输出名随其内容自动变化：内容不变，hash 不变；内容一改，hash 就变，浏览器自然拉新文件、丢旧缓存。
Webpack 中启用 contenthash 的关键配置
在 webpack.config.js 的 output.filename 和 output.chunkFilename 中使用 [contenthash]（推荐 24 位以上，如 [contenthash:24]），并确保开启持久化缓存和模块标识稳定：
-
JS/CSS 文件命名：设为
js/[name].[contenthash:24].js和css/[name].[contenthash:24].css -
禁用 module.id 的随机性：添加
optimization.moduleIds: 'deterministic'，避免无改动时 hash 波动 -
分离 vendor 和 runtime：配合
splitChunks配置，使第三方库、业务代码、运行时各自独立 hash，互不影响 -
HTML 插件需注入最新 hash 引用：用
HtmlWebpackPlugin自动替换<script>标签中的文件名，避免手动维护
Vite 中的等效实践
Vite 默认已启用 content-based hashing，但需确认和微调以保障单文件粒度更新：
-
构建输出名格式由
build.rollupOptions.output.entryFileNames和chunkFileNames控制，默认即含[hash]（Vite 2.9+ 实际为 contenthash） -
显式指定更稳定的哈希长度：例如设为
entryFileNames: 'assets/[name].[hash:24].js' -
禁用
build.sourcemap或设为'inline'外的值，否则 sourcemap 内容变动可能意外触发 JS 文件 hash 变化 -
静态资源（如图片/字体）也走 hash：Vite 默认对
import进来的资源生成 hash 文件名，确保变更可被精准识别
配套服务端与 CDN 设置要点
前端生成了带 hash 的文件，还需后端/CDN 配合才能真正实现“按需更新”：
-
静态资源设置强缓存（如
Cache-Control: public, max-age=31536000），让浏览器长期复用未变文件 -
HTML 文件必须禁用强缓存（
no-cache或短max-age），确保每次能获取最新入口索引 -
CDN 缓存策略按路径区分：例如
/assets/*.js走长缓存，/index.html走短缓存或不缓存 - 避免 Nginx/Apache 对 .js/.css 做额外压缩或重写，防止内容被修改导致 hash 失效
验证是否生效的简单方法
改一行业务代码后重新构建，观察以下三点：
- 仅改动模块对应的 JS 文件名发生变化，其余 chunk（如 vendor）保持原 hash
- 浏览器开发者工具 Network 面板中，新文件状态码为
200（非 304），旧文件不再被请求 - 清空浏览器缓存后首次访问，HTML 加载新 script URL；二次访问时，未改动的 JS/CSS 直接从 disk cache 加载
