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'<em id="__mceDel">//配置 vite.config.js 文件
 plugins: [
      vue(), 
      vueJsx(), 
      usePluginImport({
        libraryName: 'view-ui-plus',
        libraryDirectory: "src/components"
      }),
    ],
</em>