如何使用CSSNano优化生产环境CSS体积_通过PostCSS插件流处理-css教程-PHP中文网

cssnano是postcss构建阶段的压缩插件，不参与html运行时；必须在webpack/vite等工具中配置，置于autoprefixer之后，通过preset显式设置并禁用危险优化项以避免样式错乱。

如何使用cssnano优化生产环境css体积_通过postcss插件流处理

cssnano 不会出现在 HTML 里，也不会在浏览器中运行——它只在构建阶段起作用。你看到的压缩效果，是构建工具（如 Webpack、Vite）调用 postcss + cssnano 处理源 CSS 后输出的结果。直接在 <link> 中引用未处理的源文件，cssnano 完全无感。

为什么 cssnano 配置写了却没压缩？

常见失效不是因为插件没装，而是构建链路断了或顺序错了：

postcss-loader 的 postcssOptions.plugins 数组里没写 require('cssnano')({ preset: 'default' })（注意不是旧版的 options.plugins）
autoprefixer 和 cssnano 顺序颠倒：必须 autoprefixer 在前，否则 cssnano 可能误删 -webkit-flex 等前缀，导致 iOS 12 崩溃
用了 MiniCssExtractPlugin 却还配了 minimize: true —— 这个选项已废弃，会跳过 PostCSS 管道，退化成仅删空格的弱压缩
源 CSS 分散在多个 @import 文件中，但没配 postcss-import 插件，cssnano 只看到单个文件，无法做跨文件合并

默认 preset 导致样式错乱怎么办？

preset: 'default' 开了很多激进优化，默认启用 mergeRules、sortSelectors、reduceTransforms。这些会重排伪类顺序、合并看似重复的选择器，极易破坏行为逻辑：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

a:hover 被合并到 a 规则后，可能被 a:focus 覆盖
运行时动态插入的 .is-active 类被提前合并，丢失 specificity
display: -ms-flexbox 在 IE11 项目中被 normalizeWhitespace 格式化成非法值
postcss-custom-properties 处理的变量，若没设 preserve: true，会被 cssnano 当作无效声明删掉

紧急修复配置：require('cssnano')({ preset: ['default', { mergeRules: false, sortSelectors: false, reduceTransforms: false }] })

如何验证 cssnano 真正生效？

别只看文件体积变小——那可能是其他工具干的。确认 cssnano 在工作，得看三件事：

构建日志里有没有 cssnano 相关输出（Webpack 5+ 默认不打，可加 stats: 'verbose' 查看插件执行顺序）
对比构建前后 CSS 源码：/* comment */ 是否消失、#ff0000 是否变成 red、margin: 0px 0px 0px 0px 是否缩为 margin: 0
检查最终产出的 .css 文件是否仍含未处理内容：比如 @custom-media 或 color-mix() —— 若存在，说明 postcss-preset-env 或其他转换插件位置不对，压在了 cssnano 后面