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

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

build.minify 默认不压缩 CSS？

Vite 的 build.minify 默认值为 true，但它只控制 JS 压缩（用 esbuild），**对 CSS 是不生效的**。CSS 压缩由内部插件自动处理，但前提是没被其他配置干扰——比如你手动禁用了 CSS 处理，或引入了冲突的 PostCSS 插件。

确认 CSS 是否真被压缩了

别只看文件名带 .css 就以为没压。实际构建后检查 dist 下的 CSS 文件内容：如果还保留换行、空格、长变量名，说明没压缩；如果变成单行、类名被缩短、注释全删，那已经生效了。

• 默认行为：Vite 内置使用 cssnano（基于 PostCSS）压缩 CSS，无需额外安装
• 验证方式：构建后打开 dist/assets/*.css，搜索 /* 或 n —— 压缩后基本看不到原始换行和块级注释
• 常见干扰：如果你在 vite.config.js 中写了 css: { postcss: {...} } 且覆盖了默认配置，可能意外关掉了 cssnano

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

默认压缩足够用，但若要调优（比如保留 license 注释、禁用某些转换），就得进阶配置。这时不是改 minify，而是动 css.postcss 或 build.cssCodeSplit：

• 想保留 LICENSE 注释？加 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 配置不包含 autoprefixer 的 target，所以 flex 可能不会补 -webkit-flex
• 解决方案：在项目根目录加 postcss.config.js，明确写：

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

• 另一个隐形问题：CSS in JS 库（如 styled-components）生成的样式不会走 Vite 的 CSS 压缩流水线，得靠库自身处理