Vite 有哪些性能优化策略？如何提升构建速度？

Vite 提供了多种性能优化策略，可以帮助开发者提升项目的构建和运行性能。以下是 Vite 性能优化的关键方法：

依赖预构建优化：

1. 合理配置 optimizeDeps：

javascript
export default {
  optimizeDeps: {
    include: ['lodash'], // 强制预构建
    exclude: ['some-large-lib'] // 排除大型库
  }
}

1. 使用缓存：Vite 会缓存预构建结果，避免重复构建

构建优化：

1. 代码分割：

javascript
export default {
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['react', 'react-dom'],
          utils: ['lodash', 'axios']
        }
      }
    }
  }
}

1. Tree-shaking：Vite 自动移除未使用的代码

2. 压缩优化：

javascript
export default {
  build: {
    minify: 'terser', // 或 'esbuild'
    terserOptions: {
      compress: {
        drop_console: true // 移除 console
      }
    }
  }
}

开发环境优化：

1. 禁用 Source Map：

javascript
export default {
  build: {
    sourcemap: false
  }
}

1. 减少文件监听：

javascript
export default {
  server: {
    watch: {
      ignored: ['**/node_modules/**', '**/.git/**']
    }
  }
}

资源优化：

1. 调整内联阈值：

javascript
export default {
  build: {
    assetsInlineLimit: 4096 // 小于 4KB 的资源内联
  }
}

1. 使用 CDN：将大型依赖放到 CDN

2. 图片优化：使用 WebP 等现代格式

CSS 优化：

1. CSS 代码分割：Vite 自动提取 CSS 到独立文件

2. CSS 压缩：

javascript
export default {
  build: {
    cssCodeSplit: true,
    cssMinify: 'lightningcss' // 更快的 CSS 压缩
  }
}

插件优化：

1. 按需加载插件：只在需要时加载插件

2. 使用轻量级插件：选择性能更好的替代方案

缓存策略：

1. 文件名 Hash：使用 [hash] 实现长期缓存

2. HTTP 缓存：配置服务器缓存策略

性能监控：

1. 构建分析：

bash
npm run build -- --mode analyze

1. 使用 rollup-plugin-visualizer 分析打包结果

最佳实践：

1. 避免过度优化，先分析瓶颈
2. 使用最新的 Vite 版本
3. 合理配置，避免不必要的优化
4. 定期审查依赖，移除未使用的包
5. 使用 CDN 加速静态资源