unplugin-vue-components插件可以在Vue文件中自動引入組件（包括項目自身的組件和各種組件庫中的組件）；作者是Vite生態(tài)圈大名鼎鼎的Anthony Fu
使用此插件后粥烁，不需要手動編寫import { Button } from 'ant-design-vue'這樣的代碼了衍慎，插件會自動識別template中使用的自定義組件并自動注冊悄泥。
1. 安裝[unplugin-vue-components]
yarn install unplugin-vue-components
2. 在vite中使用
import Components from 'unplugin-vue-components/vite' // 按需加載自定義組件
import { ElementPlusResolver, AntDesignVueResolver} from 'unplugin-vue-components/resolvers'
export default defineConfig {
// ...
plugins: [
// 按需引入
Components({
dts: true,
dirs: ['src/components'], // 按需加載的文件夾
resolvers: [
ElementPlusResolver(),
AntDesignVueResolver({
// 參數(shù)配置可參考：https://github.com/antfu/unplugin-vue-components/blob/main/src/core/resolvers/antdv.ts
// 自動引入 ant-design/icons-vue中的圖標，需要安裝@ant-design/icons-vue
resolveIcons: 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變?yōu)?71KB,css文件也有明顯的減小,效果非常明顯;
