Vite按需引入自定義組件unplugin-vue-components

1. 安裝unplugin-vue-components

yarn install unplugin-vue-components

2. 在vite中使用

import Components from 'unplugin-vue-components/vite' // 按需加載自定義組件
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig {
  // ...
  plugins: [
    // 按需引入
    Components({
      dts: true,
      dirs: ['src/components'], // 按需加載的文件夾
      resolvers: [ElementPlusResolver()] // ElementPlus按需加載
    })
  ],
  // ...
}

3. 對(duì)比結(jié)果

image-20220311110100778

image-20220311110341947

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