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文件也有明显的减小,效果非常明显;
