CSS类名静态混淆核心是确定性哈希替换，通过CSS Modules配置localIdentName实现稳定命名，搭配Terser优化JS中类名引用，并可用postcss-modules或purgecss进一步压缩与清理。
直接在打包阶段对 CSS 类名做静态混淆，核心不是“异步”，而是“可预测的、确定性的哈希替换”——所谓“异步样式名”通常指 CSS Modules 或类似方案生成的局部作用域类名（如 .Button__clickable__abc123），它们本身已是静态混淆的产物。真正的自动化压缩混淆，关键在于构建时统一控制命名策略与资源输出流程。
启用 CSS Modules 并配置类名哈希规则
CSS Modules 默认就提供类名混淆能力，无需额外插件。只需在 Webpack 的 css-loader 中开启 modules 并指定 localIdentName：
- 使用带哈希的命名模板，例如：
[name]__[local]__[hash:base64:5]，确保相同类名在不同文件中不冲突，且每次构建结果稳定（避免 hash 变动影响缓存） - 搭配
exportLocalsConvention: 'camelCaseOnly'，让 JS 中导入的类名自动转为驼峰，提升可读性 - 若用 Vue，
<style module>会自动启用此机制，无需手动配 loader
配合 Terser 实现 JS 中动态类名引用的同步处理
当 JS 里通过字符串拼接或变量引用 CSS Modules 类名（如 cls = `${styles.btn} ${styles.active}`），Terser 默认无法识别并压缩这些字符串。需补充处理：
- 避免运行时拼接，改用对象解构 + 模板字面量：
const { btn, active } = styles; cls = `${btn} ${active}`，Terser 能识别并保留对应哈希名 - 在
vue.config.js或webpack.config.js的optimization.minimizer中，为 Terser 配置keep_fnames: true（防止函数名被误删影响样式注入逻辑） - 禁用
drop_console等激进选项，除非确认不影响样式相关调试逻辑
使用 postcss-modules 插件做全局类名映射与压缩
对于非 Modules 场景（如传统 CSS + BEM），可用 postcss-modules 在 PostCSS 流程中完成类名转换，并导出 JSON 映射表供 JS 引用：
- 安装
postcss-modules和postcss，在postcss.config.js中添加插件 - 设置
generateScopedName为哈希函数，例如：(name, filename) => `${name}_${hash(filename)}_` - 导出
json文件（如css-modules.json），JS 可按需加载映射，实现“静态混淆 + 动态引用”闭环
构建后清理冗余类名（可选增强）
若项目含大量未使用的 CSS 规则（尤其组件库按需引入不彻底），可在打包后调用 purgecss：
- 配合 Webpack 插件
purgecss-webpack-plugin，白名单保留关键类名（如ant-*、el-*） - 扫描
.js和.vue文件中的类名字符串，剔除未实际引用的 CSS 选择器 - 注意：必须确保所有动态类名都以字面量形式出现（如
class="foo"或styles.foo），否则会被误删
