unplugin-vue-components插件可以在Vue文件中自動(dòng)引入組件（包括項(xiàng)目自身的組件和各種組件庫(kù)中的組件）；作者是Vite生態(tài)圈大名鼎鼎的Anthony Fu

使用此插件后，不需要手動(dòng)編寫import { Button } from 'ant-design-vue'這樣的代碼了，插件會(huì)自動(dòng)識(shí)別template中使用的自定義組件并自動(dòng)注冊(cè)。

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
              // 自動(dòng)引入 ant-design/icons-vue中的圖標(biāo)，需要安裝@ant-design/icons-vue
              resolveIcons: true,
            })
     ] // ElementPlus按需加載
    })
  ],
  // ...
}

tsconfig.json中配置

配置完成后，運(yùn)行代碼，會(huì)在項(xiàng)目根目錄自動(dòng)生成一個(gè)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組件和項(xiàng)目中src/components目錄(可以通過(guò)dirs配置項(xiàng)修改目錄)下的組件都可以直接使用，無(wú)需寫import語(yǔ)句了.

image.png

打包結(jié)果對(duì)比

image.png

image.png

從這里可以看出引入插件后vendor.js文件由原來(lái)的959KB變?yōu)?71KB,css文件也有明顯的減小,效果非常明顯;