Vite按需引入自定义组件unplugin-vue-components

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. 对比结果

image-20220311110100778

image-20220311110341947

从这里可以看出引入插件后vendor.js文件由原来的959KB变为371KB,css文件也有明显的减小,效果非常明显;