Vite 性能优化

Vite 本身已经很快了，但在大型项目中，仍然有不少优化空间。本文分享几个实用的优化技巧。

按需引入

使用 unplugin-auto-import 和 unplugin-vue-components 可以自动按需引入，避免打包整个库。

// vite.config.ts
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'

export default {
  plugins: [
    AutoImport({ imports: ['vue', 'vue-router'] }),
    Components({ dts: true }),
  ]
}

代码分割

Vite 基于 Rollup，可以精细控制分包策略：

build: {
  rollupOptions: {
    output: {
      manualChunks: {
        vendor: ['vue', 'vue-router'],
        ui: ['ant-design-vue']
      }
    }
  }
}

图片与静态资源

• 小图使用 Base64 内联（Vite 默认对 4KB 以下的图片自动处理）
• 大图考虑使用 WebP 格式
• 使用 vite-plugin-imagemin 在构建时压缩图片

小结

开发体验和构建产物的优化并不矛盾。合理配置 Vite，既能享受极速的 HMR，又能输出高性能的生产包。