Vite 可以使用插件进行扩展，这得益于 Rollup 优秀的插件接口设计和一部分 Vite 独有的额外选项。

unplugin-vue-components

Vue 的按需组件自动导入。github地址

自动导入UI库

内置了大多数常见UI库解析器。以 Ant Design Vue 为例。

• 安装

pnpm add unplugin-vue-components -D

• Vite配置使用

// vite.config.js
import { defineConfig } from 'vite'
import Components from 'unplugin-vue-components/vite'
import {AntDesignVueResolver
} from 'unplugin-vue-components/resolvers'export default defineConfig({plugins: [Components({resolvers: [AntDesignVueResolver()]})]
})

unplugin-auto-import

自动导入 Composition API。github地址

• 安装

pnpm add unplugin-auto-import -D

• Vite配置使用

// vite.config.js
import { defineConfig } from 'vite'
import autoImport from 'unplugin-auto-import/vite'export default defineConfig({plugins: [autoImport({imports: ['vue','vue-router','pinia'],dts: false})]
})

• 使用插件，代码前后对比

使用前：

import { computed, ref } from 'vue'
const count = ref(0)
const doubled = computed(() => count.value * 2)

使用后：

const count = ref(0)
const doubled = computed(() => count.value * 2)

rollup-plugin-visualizer

打包分析插件。

• 安装

pnpm add rollup-plugin-visualizer -D

• vite配置

// vite.config.js
import { defineConfig } from 'vite'
import { visualizer } from 'rollup-plugin-visualizer'export default defineConfig({plugins: [visualizer()]
})

打包后，会在根目录下生成一个 stats.html文件，用浏览器打开后，如下图：

vite-plugin-compression

使用 gzip 或 brotli 压缩资源。github地址

• 安装

pnpm add vite-plugin-compression -D

• vite配置使用

// vite.config.js
import { defineConfig } from 'vite'
import compression from 'vite-plugin-compression'export default defineConfig({plugins: [// gz格式compression({threshold: 1024 * 500,   // 体积大于 threshold 才会被压缩,单位 bext: '.gz',   // 压缩文件格式deleteOriginFile: false   // 是否删除源文件})// br格式// compression({//   threshold: 1024 * 500,    // 体积大于 threshold 才会被压缩,单位 b//   ext: '.br',//   algorithm: 'brotliCompress',//   deleteOriginFile: false// })]
})

• 参数说明