CSS 代码分割

Vite 构建时 CSS 的分割策略与 JS chunk 分割相关。

CSS 分割策略

同步导入 CSS

// main.js
import './styles/main.css'

构建后：

dist/
├── index.js
├── index.css    # CSS 提取到主文件

异步导入 CSS

// 异步加载组件
const About = () => import('./views/About.vue')

构建后：

dist/
├── index.js
├── index.css
├── About-xxx.js      # 异步 chunk
├── About-xxx.css     # CSS 单独提取

注意：异步 chunk 的 CSS 单独提取，按需加载。

CSS 合入 JS

export default defineConfig({
  build: {
    cssCodeSplit: false  # CSS 全部合入主文件
  }
})

CSS 分割配置

export default defineConfig({
  build: {
    // 默认开启 CSS 分割
    cssCodeSplit: true
  }
})

CSS 加载顺序

1. 加载 index.html
2. 加载主 CSS（阻塞渲染）
3. 加载主 JS
4. 异步加载 chunk 时加载对应 CSS

CSS chunk 命名

export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        assetFileNames: (assetInfo) => {
          if (assetInfo.name.endsWith('.css')) {
            return 'css/[name]-[hash][extname]'
          }
          return 'assets/[name]-[hash][extname]'
        }
      }
    }
  }
})

要点总结

• 同步导入 CSS 提取到主文件
• 异步导入 CSS 随 chunk 单独提取
• cssCodeSplit 控制分割策略
• 默认开启 CSS 分割