默认 localIdentName 生成长类名是为避免模块间 class 冲突，采用完整选择器+路径+内容哈希；可通过 [local]\_[hash:base64:4] 等方式缩短，但需权衡哈希碰撞与 SSR 一致性。
localIdentName 默认生成的类名为什么很长
默认情况下 css-loader 的 localIdentName 是 [hash:base64] 或类似变体，生成的类名像 _1xK8zA9mQbR2vLpTnU4sE —— 看似随机但实际依赖完整 CSS 选择器 + 模块路径 + 内容哈希，导致长度不可控。这不是“加密安全需求”，而是默认保守策略：避免不同模块同名 class 冲突。
用 [hash:base64:5] 或 [local]_[hash:base64:4] 缩短长度
直接改 localIdentName 字符串就能压缩输出长度，关键在控制哈希截取位数和组合方式：
-
[hash:base64:5]：只取 base64 哈希前 5 位，如A9mQb，极短但碰撞风险略升（对中小型项目通常可接受） -
[local]_[hash:base64:4]：保留原始类名前缀 + 4 位哈希，如btn_A9mQ，兼顾可读性与唯一性 - 避免用
[path]或[name]，它们会引入路径/文件名，显著加长且不利于缓存（路径变更即哈希重算）
Webpack 配置示例：
{
test: /\.css$/,
use: [{
loader: 'css-loader',
options: {
modules: true,
localIdentName: '[local]_[hash:base64:4]'
}
}]
}
缩短后要注意哈希碰撞和 SSR 一致性
哈希位数越少，不同选择器生成相同类名的概率越高。尤其在 SSR 场景下，服务端和客户端必须用完全相同的 localIdentName 和哈希算法，否则会样式丢失或 FOUC。
立即学习“前端免费学习笔记（深入）”；
- 确保 Webpack 构建时
css-loader版本一致（v6+ 默认用 xxhash，v5 用 murmurhash，混用会导致哈希不一致） - 如果启用
exportOnlyLocals: true（如仅用于 CSS Modules 类名导出），仍需保持哈希逻辑一致 - 测试方法：在多个文件中写相同类名（如
.container），构建后检查是否生成重复类名；若有，加 1 位哈希或换用[hash:base64:5]
真正影响体积的是 minify 后的 CSS，不是类名原始长度
缩短 localIdentName 对最终打包体积影响有限——现代 CSS 压缩工具（如 cssnano）会自动把长类名替换成单字符别名（a/b/c…），前提是开启 reduceIdents 或使用默认 preset。
- 如果你没配 CSS 压缩，那缩短
localIdentName确实能省几 KB；但更推荐配好css-minimizer-webpack-plugin - 过度压缩类名（如全用单字母）反而让调试困难，Chrome DevTools 中无法反查源文件位置
- 真正该优先做的：启用
contentHash替代hash，让 CSS 文件内容不变时 hash 不变，提升长期缓存效率
类名长度只是表象，哈希策略、构建确定性、压缩链路才是关键变量。
