unplugin-vue-components插件可以在Vue文件中自動引入組件（包括項目自身的組件和各種組件庫中的組件）冤议；作者是Vite生態(tài)圈大名鼎鼎的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({// 參數(shù)配置可參考：https://github.com/antfu/unplugin-vue-components/blob/main/src/core/resolvers/antdv.ts// 自動引入 ant-design/icons-vue中的圖標(biāo)，需要安裝@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
打包結(jié)果對比
image.png
image.png
從這里可以看出引入插件后vendor.js文件由原來的959KB變?yōu)?71KB,css文件也有明顯的減小,效果非常明顯;
作者：老鼠AI大米_Java全棧
鏈接：http://www.reibang.com/p/bce8e4b86c67
來源：簡書
著作權(quán)歸作者所有义矛。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處盟萨。
