html需通过构建工具动态注入带哈希的css路径：webpack用html-webpack-plugin自动插入，gulp用gulp-rev+gulp-rev-collector替换引用；须确保contenthash生效、资源全走构建流程、html与cdn缓存策略合理。
压缩后的 CSS 文件路径怎么写才不会 404
压缩后文件名通常带哈希（比如 main.a1b2c3.css），直接写死路径会失效。关键不是“怎么压缩”，而是“压缩后怎么让 HTML 找到它”。
- Webpack 用户必须用
html-webpack-plugin，它会在打包时自动把<link href="...">插入 HTML，并匹配最新哈希名 - Gulp 用户不能手动写
dist/style.css，得用gulp-rev+gulp-rev-collector，前者重命名+生成rev-manifest.json，后者读这个 JSON 替换 HTML 中的引用 - 如果用
gulp-useref，注意它只处理注释标记（如<!-- build:css css/bundle.css -->），且默认不支持哈希替换，需配合gulp-rev链式调用
Webpack 的 mini-css-extract-plugin 输出名配置陷阱
很多人以为设了 filename: 'css/[name].[contenthash:8].css' 就万事大吉，但漏了两件事：HTML 插件没配好，或者 contenthash 没生效。
-
contenthash只在启用mini-css-extract-plugin时有效；用style-loader开发时它不生效，别拿开发环境测试哈希逻辑 - 必须关掉
optimization.splitChunks.chunks: 'all'的默认 CSS 提取（如果用了），否则可能多出vendors.css且哈希不随内容变——检查最终 dist 目录里 CSS 文件修改时间是否真随源码变 - 若 CSS 里有
@import或 url() 引用字体/图片，确保这些资源也走 webpack 处理，否则contenthash不包含它们，缓存会出错
Gulp 中 gulp-rev 和 gulp-rev-collector 配合失败的典型表现
常见现象是 HTML 里还是 style.css，或者报错 Cannot find module './rev-manifest.json'。
-
gulp-rev必须在gulp.src('src/css/*.css')后立即执行，且gulp.dest('dist/css')要在它之后——顺序错就生成不了rev-manifest.json -
gulp-rev-collector的revReplace必须指向正确路径：revReplace({ revManifest: require('./dist/rev-manifest.json') })，注意是require()，不是字符串路径 - HTML 文件本身不能被
gulp-rev处理（它只改静态资源名），否则rev-manifest.json里会出现index.html条目，导致 collector 找不到对应 CSS 键名
上线后 CSS 更新了但用户页面还是旧样式
大概率不是构建问题，而是缓存策略没断开旧资源链路。
- 检查 HTTP 响应头：
Cache-Control: public, max-age=31536000对哈希文件没问题，但index.html必须设成no-cache或短时效（比如max-age=600），否则用户浏览器永远不重新请求 HTML，自然看不到新 CSS 链接 - CDN 缓存要单独清，尤其当 CDN 把
index.html当静态资源缓存了——哪怕你本地重启服务，CDN 还在返旧 HTML - 如果用了 Service Worker，确认它没把旧 CSS 文件 cache-first 拦截住；
workbox.injectManifest()默认不处理哈希 CSS，但自定义路由规则可能误伤
哈希值是否真正反映内容变化、HTML 是否拿到最新链接、浏览器和 CDN 是否绕过缓存——这三个点串不起来，压缩再完美也没用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
