自动导入插件 unplugin-vue-components

它是一个 '编译时' 的插件，不会影响运行时的性能

• 自动识别模板中使用的组件
• 自动导入组件

1. 安装 unplugin-vue-components

npm install unplugin-vue-components -D

2. 在 vite.config.js 中配置 unplugin-vue-components

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()] })]
})

2. 工作原理

• 在编译时，unplugin-vue-components 会扫描模板中的组件，并自动导入组件

3. 性能影响

• 构建时：略微增加构建事件
• 运行时：无影响，反而会提高运行时的性能
• 打包体积：减少打包体积，因为只引入使用的组件

4. 优势

• 减少手动导入组件的工作量
• 提高代码的可维护性
• 减少打包体积
• 统一管理组件依赖

后续将用 unplugin-vue-components 来优化项目，减少打包体积，提高打包速度。