如何在Vite中开启CSS压缩功能_配置build选项优化生产环境CSS资源

Vite 的 build.minify 默认为 true，仅压缩 JS；CSS 由内置 cssnano 自动压缩，无需额外配置，但可能被自定义 PostCSS 配置干扰。

build.minify 默认不压缩 CSS？

这里有个常见的理解误区：Vite 配置里的 build.minify 选项，默认值确实是 true，但它只管 Ja vaScript 的压缩（底层用的是 esbuild），**对 CSS 文件是无效的**。CSS 的压缩工作，其实是由 Vite 内部的一个插件在默默完成的。不过，这个自动化流程有个前提——它没有被你手动的其他配置给“带偏”。比如，如果你禁用了默认的 CSS 处理，或者引入了一些有冲突的 PostCSS 插件，这个内置的压缩功能就可能失效。

确认 CSS 是否真被压缩了

判断压缩是否生效，不能只看文件名。最直接的办法，是构建完成后，亲自去 dist 目录下检查生成的 CSS 文件内容。如果里面还保留着清晰的换行、缩进空格，或者完整的类名，那说明压缩没起作用。反之，如果整个文件被压缩成单行，类名被缩短，所有注释也都不见了，恭喜你，压缩功能正在正常工作。

• 默认行为：Vite 内部集成了 cssnano（基于 PostCSS）来处理 CSS 压缩，通常你不需要额外安装任何东西。
• 验证方式：打开构建产物 dist/assets/ 下的 CSS 文件，试着搜索 /* 或者换行符 \n —— 一个被充分压缩的文件里，你基本找不到这些痕迹。
• 常见干扰：问题往往出在自定义配置上。如果你在 vite.config.js 里手动设置了 css: { postcss: {...} }，并且完全覆盖了默认配置，就有可能不小心把 cssnano 给排除在外了。

需要显式配置 CSS 压缩参数时

对于大多数项目，默认压缩已经足够好了。但如果你有特殊需求，比如想保留特定的版权注释，或者禁用某些优化规则，就需要进行更精细的配置。请注意，这里要调整的不是 minify 选项，而是 css.postcss 或者 build.cssCodeSplit 相关配置。

• 想保留 LICENSE 注释？ 可以在 css.postcss 里显式配置 cssnano：

  css: {
    postcss: {
      plugins: [
        require('cssnano')({
          preset: ['default', { discardComments: { removeAllButFirst: true } }]
        })
      ]
    }
  }

• 想彻底关掉 CSS 压缩（仅限调试）？ 可以设置 build.cssCodeSplit: false 并手动移除 cssnano 插件，不过一般不建议在生产环境这么做。
• 需要留意的是，build.cssCodeSplit 这个选项控制的是「是否将 CSS 拆分到独立的文件中」，它本身和压缩无关。但拆分后的每一个 CSS 文件，依然会分别经历压缩流程。

容易被忽略的兼容性坑

CSS 压缩过程本身很少直接报错，但压缩后的代码，在老旧浏览器里可能会出问题——尤其是当你用了一些现代的 CSS 特性，比如 color-mix()、:has() 选择器或者层叠层 @layer，却没有配置相应的 PostCSS 降级插件时。

立即学习“前端免费学习笔记（深入）”；

• Vite 默认的 PostCSS 配置并不包含针对特定浏览器的目标设置，这意味着像 display: flex 这样的属性，可能不会自动添加 -webkit- 前缀。
• 解决方案：在项目根目录创建一个 postcss.config.js 文件，明确声明插件和目标：

  module.exports = {
    plugins: {
      'autoprefixer': { overrideBrowserslist: ['> 1%', 'last 2 versions'] },
      'cssnano': {}
    }
  }

• 另一个隐形问题：对于 CSS-in-JS 库（例如 styled-components）运行时生成的样式，它们不会经过 Vite 的 CSS 构建流水线，自然也就不会被内置的 cssnano 压缩。这类库的样式压缩，需要依靠其自身的配置或插件来完成。