CSS Minify 配置

Vite 支持多种 CSS 压缩方式，可选择适合项目的压缩工具。

压缩选项

JavaScript

export default defineConfig({
  build: {
    cssMinify: 'esbuild'  # 默认
  }
})

选项	说明
esbuild	使用 esbuild 压缩（默认）
lightningcss	使用 Lightning CSS
false	不压缩 CSS

Lightning CSS 压缩

JavaScript

export default defineConfig({
  build: {
    cssMinify: 'lightningcss'
  },
  css: {
    transformer: 'lightningcss'
  }
})

禁用 CSS 压缩

JavaScript

export default defineConfig({
  build: {
    cssMinify: false
  }
})

注意：生产环境建议压缩 CSS 减少体积。

压缩工具对比

工具	速度	功能
esbuild	快	基础压缩
Lightning CSS	极快	高级 CSS 特性
禁用	-	不压缩

Lightning CSS 优势

极快的压缩速度
支持最新 CSS 特性
CSS Nesting 原生支持
自动降低 CSS 语法

配置 Lightning CSS

Bash

npm add -D lightningcss

JavaScript

export default defineConfig({
  css: {
    transformer: 'lightningcss',
    lightningcss: {
      // CSS 特性配置
      drafts: {
        nesting: true
      }
    }
  },
  build: {
    cssMinify: 'lightningcss'
  }
})

CSS 压缩效果

CSS

/* 原 CSS */
.container {
  padding: 10px;
  margin: 20px;
}

/* 压缩后 */
.container{padding:10px;margin:20px}

要点总结

cssMinify 控制 CSS 压缩方式
默认使用 esbuild 压缩
Lightning CSS 速度更快
生产环境建议压缩