cssnano压缩强度由语法安全控制、转换规则开关和插件级优化三类配置决定；关键选项包括normalizewhitespace、reduceidents、zindex、discardcomments、discardunused及svgo子配置，需按项目实际安全启用或禁用。
cssnano 默认不启用极端压缩，必须手动关闭安全选项并调整多组配置才能接近“极致”级别；盲目开启反而可能导致 CSS 行为异常。
哪些 cssnano 选项真正影响压缩强度？
压缩强度主要由三类配置决定：语法安全控制、转换规则开关、以及插件级细粒度优化。关键不是“开得越多越好”，而是识别哪些规则在你的项目中可被安全绕过。
-
preset设为"default"会启用保守策略，改用["default", { cssDeclarationSorter: false }]可避免属性重排引发的 specificity 问题 -
normalizeWhitespace启用后会移除所有空格与换行，但可能破坏white-space: pre元素的渲染 -
reduceIdents和svgo默认开启，但reduceIdents会重命名@keyframes名称，需确认动画引用方式是否依赖字面量 -
zindex插件自动降低z-index值，若项目中存在动态 JS 注入 z-index 或依赖具体数值（如z-index: 9999），必须禁用
PostCSS 配置中如何安全启用极端压缩？
不能只靠 cssnano({ preset: "default" })，要显式覆盖高风险默认项，并补全底层插件控制。
module.exports = {
plugins: [
require('cssnano')({
preset: ['default', {
// 关键：关闭可能破坏行为的转换
reduceIdents: false,
zindex: false,
// 显式启用高风险但强效的压缩
normalizeWhitespace: true,
discardComments: { removeAll: true },
// 强制移除未使用的 @charset（仅当确定编码统一为 UTF-8）
discardUnused: true,
}],
// 底层 svgo 需单独控制，否则 SVG 内联样式可能被误删
svgo: {
plugins: [
{ name: 'removeViewBox', active: false },
{ name: 'cleanupIDs', active: false }, // ID 重命名可能影响 JS querySelector
]
}
})
]
}
压缩后 CSS 行为异常的常见原因
极端压缩不是“无感操作”，以下现象往往指向某项配置越界：
- 动画突然失效 → 检查
reduceIdents是否重命名了@keyframes，或discardDuplicates删除了重复定义 - 图标 SVG 显示错位 →
svgo的removeViewBox或removeDimensions被启用 -
calc()计算结果错误 →calc插件在压缩时做了非法简化（如合并单位），应设calc: { precision: 8 }并禁用mergeLonghand - 伪元素内容丢失 →
discardEmpty删除了空::before规则，而它实际通过content插入字符
极端压缩的边界在于「你是否完全掌控所有 CSS 的使用方式」——比如动态插入样式、JS 读取 computedStyle、CSS-in-JS 注入、甚至第三方 UI 库的内部规则。一旦有任一环节依赖原始写法，就必须把对应 cssnano 插件关掉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
