css modules 默认类名仍可能被爬取，因其哈希类名是构建时生成的静态字符串而非运行时加密，html/css 文件公开即可被爬虫提取；需配置 localidentname 为 '[hash:base64:5]' 彻底移除语义化片段，并禁用 :global()、关闭 source map 等。
为什么 CSS Modules 默认类名仍可能被爬取
CSS Modules 的哈希类名（如 Button_button__kx8rA）本质是构建时生成的静态字符串，并非运行时加密。只要 HTML 或 CSS 文件被公开访问，爬虫就能直接提取这些类名——它们只是“难读”，不是“不可见”。尤其当类名保留了原始语义（如 [name]__[local]__）时，header__title 这类结构极易被模式识别还原。
压缩类名：用 hash 替代语义化片段
关键不是“加 hash”，而是“只留 hash”。默认配置 [name]__[local]___[hash:base64:5] 会暴露文件名和原始类名；生产环境应彻底移除可推断部分：
- Webpack 中配置
css-loader：localIdentName: '[hash:base64:5]' - Taro 项目改
generateScopedName: '[hash:base64:5]' - Vite 用户需在
vite.config.ts的css.modules选项中设置classNameStrategy: 'stable'并配合 PostCSS 插件进一步缩短
效果：无论你写的是 .modal 还是 .user-profile-card，最终都变成类似 a1b2c 的 5 字符类名，无规律、无上下文、无法反推。
避免 :global() 和 CSS-in-JS 意外逃逸
任何显式使用 :global(.btn)、:global #app 或通过 dangerouslySetInnerHTML 注入样式字符串的行为，都会绕过 CSS Modules 的作用域控制，让原始类名直接暴露在 HTML 中。更隐蔽的是某些 CSS-in-JS 库（如早期 styled-components）若未启用 ssr: true 或未正确剥离开发用 class 名，也可能泄漏语义化标识。
- 检查所有
.module.css文件，禁止出现:global()块（除非明确需要全局覆盖，且已评估风险） - 禁用开发专用 class 名注入逻辑（如某些 UI 组件库的
data-testid类名或调试用debug-*前缀） - 确保 SSR 渲染时服务端与客户端生成的哈希一致，否则 hydration 失败会导致样式错乱，反而迫使开发者回退到硬编码 class
TypeScript 类型定义不能混淆类名，只是辅助开发
有人误以为给 .module.css 写了 TS 声明文件（如 declare const classes: { modal: string }）就能隐藏真实类名——完全不能。TS 类型只存在于编译期，不参与打包输出。生成的 JS 里仍是 styles.modal → "a1b2c" 的映射，而这个映射关系本身就在 bundle 中明文存在。
真正起混淆作用的只有构建阶段的 localIdentName 配置和是否禁用 source map。别忘了：生产环境务必关闭 devtool: 'source-map'，否则 CSS 类名与源码的对应关系会被完整还原。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
