vue3+vite+view-ui-plus 实现按需引用

现有项目使用的是 vue3+vite+view-ui-plus

由于公司要求秒开速度对h5页面进行优化，首先想到的是把组件的引用从全量引用打包改成按需引用；

下面是改之前的 view-ui-plus 引用配置，简单粗暴直接在 main.ts 中引用  

import ViewUIPlus from 'view-ui-plus'
import 'view-ui-plus/dist/styles/viewuiplus.css';
const app = createApp(App)
app.use(createPinia())
    .use(ViewUIPlus)
    .use(router)
    .mount('#app')

　　打包的时候显示的包大小 ：

 698.66 kb 是合包的量，哪怕我只引用了一个组件 打的 view-ui 的包也是 698.66kb，这肯定是全量打包了，于是我去 iviewui 官网 搜索一下 ，还真有按需引入的相关配置

 然后我也是这么配置的，也是这么引用的，可打包的时候还是和上面的结果一样，包的大小一点儿都没变小，各种试，各种配置，babel-plugin-import 插件也安装了，就是不行；

在做了小半天的测试之后，突然发现这样一个帖子 vue3如何按需加载第三方组件库详解   原来是安装的插件不对，后来安装了官方的 按需引用插件 vite-plugin-importer 再进行一下配置就行了

//vite.config.js 引用插件

import usePluginImport from 'vite-plugin-importer'

//配置 vite.config.js 文件
 plugins: [
      vue(), 
      vueJsx(), 
      usePluginImport({
        libraryName: 'view-ui-plus',
        libraryDirectory: "src/components"
      }),
    ],

　　进行一系列配置之后再打包 看效果

很明显组件库的包是按需引用了；OK 成功，今天到此为止；