unplugin-vue-components插件可以在Vue文件中自动引入组件（包括项目自身的组件和各种组件库中的组件）；作者是Vite生态圈大名鼎鼎的Anthony Fu
告别手动引入依赖：unplugin-auto-import 插件
使用此插件后，不需要手动编写import { Button } from 'ant-design-vue'这样的代码了，插件会自动识别template中使用的自定义组件并自动注册。
1. 安装[unplugin-vue-components]
yarn install unplugin-vue-components
2. 在vite中使用
importComponentsfrom'unplugin-vue-components/vite'// 按需加载自定义组件import{ElementPlusResolver,AntDesignVueResolver}from'unplugin-vue-components/resolvers'exportdefaultdefineConfig{// ...plugins:[// 按需引入Components({dts:true,dirs:['src/components'],// 按需加载的文件夹resolvers:[ElementPlusResolver(),AntDesignVueResolver({// 参数配置可参考：https://github.com/antfu/unplugin-vue-components/blob/main/src/core/resolvers/antdv.ts// 自动引入 ant-design/icons-vue中的图标，需要安装@ant-design/icons-vueresolveIcons:true,})]// ElementPlus按需加载})],// ...}
tsconfig.json中配置
配置完成后，运行代码，会在项目根目录自动生成一个components.d.ts文件;
需要在tsconfig.json的includes配置中加入此文件
// tsconifg.json{"include":["src/**/*.ts","src/**/*.d.ts","src/**/*.tsx","src/**/*.vue","./auto-imports.d.ts","./components.d.ts"]}
配置完成后，antd组件和项目中src/components目录(可以通过dirs配置项修改目录)下的组件都可以直接使用，无需写import语句了.
image.png
打包结果对比
image.png
image.png
从这里可以看出引入插件后vendor.js文件由原来的959KB变为371KB,css文件也有明显的减小,效果非常明显;
作者：老鼠AI大米_Java全栈
链接：//www.greatytc.com/p/bce8e4b86c67
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
