CSS压缩技巧：PostCSS与CSSNano实战优化

CSS压缩看似简单，实则暗藏陷阱：CSSNano默认的激进优化策略常导致:hover、@media规则消失、background简写误合并、CSS变量被错误重命名或删除、BEM类名在Shadow DOM中错配，甚至破坏动态主题切换和PurgeCSS指令识别；根本原因在于mergeLonghand、discardDuplicates、reduceIdents等高风险选项的误启用，以及PostCSS 8与CSSNano 4的插件兼容性冲突；解决方案是升级至CSSNano v5+，禁用危险选项，精准保留/*! */类关键注释，并采用最小安全配置规避运行时失效——压缩不是越狠越好，而是要在体积缩减与样式健壮性之间找到精准平衡点。

为什么CSSNano压缩后样式失效了

常见现象是压缩完的CSS里:hover、@media规则消失，或者background简写被错误合并。根本原因是CSSNano默认启用 aggressive 合并策略，比如把.a{color:red}.b{color:red}合成.a,.b{color:red}，但若原CSS里.a和.b在不同scope（如Shadow DOM或CSS Modules生成的哈希类名）下，合并后就会错配。

• 默认开启mergeLonghand，会把margin: 0 10px和margin-top: 5px强行合并，导致冲突
• discardDuplicates会删掉重复声明，但BEM中.btn--primary和.btn.is-primary可能被误判为重复
• 解决办法：禁用高风险选项，例如在postcss.config.js中显式配置{ mergeLonghand: false, discardDuplicates: false }

PostCSS配置里CSSNano版本不匹配导致报错

PostCSS 8+ 需要 CSSNano 5+，但很多旧项目还在用cssnano@4，会抛出TypeError: plugin is not a function。这是因为CSSNano 4导出的是对象，而PostCSS 8只接受函数式插件。

• 检查package.json中cssnano版本：npm list cssnano，若显示4.x，必须升级
• 升级命令：npm install cssnano@latest --save-dev，新版已内置postcss peer 依赖
• 配置写法也要改：旧版require('cssnano')({ preset: 'default' }) → 新版直接require('cssnano')，preset已默认集成

如何保留关键CSS注释不被CSSNano删除

CSSNano默认删掉所有/* */注释，但有些注释是运行时必需的，比如/*! license */或/* purgecss start ignore */这类标记。

• 启用comment选项可保留特定注释：{ comment: { preserve: /^!/ } }，这样/*! */会留下，普通/* */仍被清除
• 若用PurgeCSS，需配合/* purgecss start ignore */等指令，这些必须被保留，否则PurgeCSS无法识别边界
• 注意：不要用preserve: /./全量保留，会导致压缩率下降15%~20%，实测dist.css体积明显增大

压缩后CSS变量（--xxx）被重命名或丢失

CSSNano默认启用reduceIdents，会把--theme-color这种自定义属性名也当作可替换标识符处理，尤其在camelCase或lowercase类名存在时容易误伤。

• 自定义属性名不会被重命名，但若你写了div{ --color: red; color: var(--color) }，CSSNano可能把var(--color)简化成red，然后删掉--color声明——这在动态主题切换场景下就是致命问题
• 关闭reduceIdents和normalizeWhitespace（后者可能删掉var(--x)周围的空格，导致IE11解析失败）
• 推荐最小安全配置：{ reduceIdents: false, normalizeWhitespace: false, preset: ['default', { cssDeclarationSorter: false }] }

真正难处理的是嵌套作用域里的CSS变量继承链，比如:root{--c:#000} .dark{--c:#fff} p{color:var(--c)}，压缩时不能假设--c全局唯一。这点很多人在做暗色模式时才踩到坑，得靠手动加/* rtl:ignore */或拆分文件规避。

本篇关于《CSS压缩技巧：PostCSS与CSSNano实战优化》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！