css压缩与混淆必须按正确顺序配置：先autoprefixer加前缀，再cssnano压缩（v6+需preset: 'default'），webpack需关闭css-loader的minimize，vite需手动配置；postcss-obfuscator须在css-loader后、mini-css-extract-plugin前，且需配置classignore、parsesfc等参数，并自行导出映射表供js引用。
cssnano压缩必须放在autoprefixer之后，否则前缀会被删掉
PostCSS本身不压缩CSS，靠cssnano实现；但顺序错了就白配——常见错误是把cssnano写在autoprefixer前面，结果前缀还没加就被压缩器当成“冗余”干掉了。更隐蔽的问题是@supports规则被误删、rem单位被转成px（尤其Webpack里css-loader开了minimize时）。
正确顺序只有一条：先autoprefixer，再postcss-preset-env（如有），最后cssnano。v6+版本还必须显式传preset: 'default'，光写require('cssnano')会报Invalid CSS after ""。
-
postcss.config.js里这么写才稳：
module.exports = {
plugins: [
require('autoprefixer'),
require('cssnano')({ preset: 'default' })
]
}
- Webpack用户务必关掉
css-loader的minimize选项，避免和cssnano双重压缩 - Vite用户别依赖插件自动注入，要在
vite.config.ts的css.postcss里手动拼插件数组，并用process.env.NODE_ENV === 'production'控制是否启用
postcss-obfuscator混淆要绕过:global()、SFC模块和工具类
混淆不是无差别重命名。postcss-obfuscator默认会破坏:global()、@layer、Vue SFC里的<style module></style>，以及像u-hidden、is-active这类工具类——直接套默认配置，页面样式大概率崩。
它必须插在css-loader之后、mini-css-extract-plugin之前，否则拿不到解析后的选择器树；Vue单文件组件要确认插件版本支持SFC解析，并开启parseSFC: true。
- 忽略规则得明写：
classIgnore: ['u-*', 'is-*', /:global\(.+\)/]，注意正则里括号要转义 -
classMethod: 'random'比'simple'安全，后者在大型项目中可能产生重复类名 - 混淆后类名不会导出映射表——你得自己hook构建流程，把结果写成JSON供JS读取，这点极易忽略，直到上线发现按钮点不动才回头查
压缩和混淆不能共用同一套postcss.config.js链
开发时你要看类名调试，生产才混淆；压缩也只应在构建产物阶段启用。强行把cssnano和postcss-obfuscator同时开，会导致混淆后的类名被压缩器二次处理，比如.a1b2c3缩成.a，JS里引用直接失效。
- 用
NODE_ENV分环境：开发时只开autoprefixer，生产再链上cssnano和postcss-obfuscator - 二者不能混用同一配置项，
postcss-modules这种做类名映射的方案可以替代混淆，但它走的是静态映射闭环，和postcss-obfuscator的运行时重命名逻辑完全不同
混淆后JS引用类名必须走映射表，不能硬编码
postcss-obfuscator不提供映射导出，它只改CSS里的类名，JS里还是原来的名字——除非你额外把混淆结果存成JSON，再让JS按需加载。没这步，所有document.querySelector('.btn-primary')都会失效。
如果你用postcss-modules替代混淆，它能自动生成css-modules.json，JS通过import styles from './Button.module.css'间接引用，这条路更可控，但只适用于CSS Modules场景。
真正容易被忽略的，是混淆和JS引用之间的那一层衔接——它不在插件配置里，得你亲手补上，而且得在构建流程里确保生成时机早于JS打包。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
