构建缓存与增量构建

Vite 利用缓存机制加速开发和构建，减少重复编译。

Vite 缓存层级

依赖缓存

node_modules/.vite/
├── deps/          # 预构建依赖
├── _metadata.json # 缓存元数据

缓存命中条件：

• package.json 未变化
• lock 文件未变化
• vite.config.js optimizeDeps 未变化

清除依赖缓存

# 手动清除
rm -rf node_modules/.vite

# 或使用命令
vite --force

构建产物缓存

Rollup 构建时模块编译结果可缓存：

export default defineConfig({
  build: {
    // 缓存构建结果
    cacheDir: '.vite-cache'
  }
})

注意：二次构建利用缓存减少编译时间。

插件缓存

export default function cachePlugin() {
  const cacheFile = '.plugin-cache.json'

  return {
    name: 'cache-plugin',
    buildStart() {
      // 加载缓存
      if (fs.existsSync(cacheFile)) {
        this.cache = JSON.parse(fs.readFileSync(cacheFile))
      }
    },
    buildEnd() {
      // 保存缓存
      fs.writeFileSync(cacheFile, JSON.stringify(this.cache))
    }
  }
}

增量构建策略

// 只构建修改的模块
export default defineConfig({
  build: {
    // watch 模式增量构建
    watch: {}
  }
})

CI 缓存配置

# GitHub Actions 缓存
- name: Cache vite deps
  uses: actions/cache@v3
  with:
    path: node_modules/.vite
    key: vite-deps-${{ hashFiles('package-lock.json') }}

缓存效果对比

最佳实践

• 不要频繁清除缓存
• lock 文件保持稳定
• CI 配置依赖缓存
• 插件使用持久缓存

要点总结

• node_modules/.vite 存储预构建缓存
• 依赖未变化时直接使用缓存
• vite --force 强制重建缓存
• CI 配置缓存加速构建