Vue项目打包优化：自动导入和按需引入Naive UI

背景 ：刚刚看了下后台管理系统，竟然是全局引入的Naive UI。这点可以进行按需引入优化。
需求 ：减少打包后文件的体积，同时减少打包耗时。提升打包速度。

会用到的插件：

rollup-plugin-visualizer 用于分析代码的大小和依赖关系。
unplugin-auto-import 自动导入API(在SFC内)。 例如vue的各种api。
unplugin-vue-components 按需自动加载组件，插件会自动解析模板中的使用到的组件，并导入组件。(在SFC内)

SFC: 单文件组件，以.vue为扩展名，一般包含 <template> <script> <style>。

安装打包分析插件 rollup-plugin-visualizer

yarn add  rollup-plugin-visualizer

vite.config.ts文件

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import visualizer from 'rollup-plugin-visualizer';

export default defineConfig({
  plugins: [
    visualizer(),
    vue()
  ]
})

全局引入方式导入的打包体积：

main.ts文件

import { createApp } from "vue";
import App from "./App.vue";
import router from "@/router/index";
import { createPinia } from "pinia";
import naive from "naive-ui";
import { setupDirectives } from "@/plugins";
import "@/permission";
const app = createApp(App);
app.use(createPinia());
setupDirectives(app);
app.use(router);
app.use(naive);
app.mount("#app");

执行打包：

打包耗时：147秒

访问根目录下的stats.html网页

NaiveUI 打包后的体积2.16MB

按需引入naive-ui打包

使用 unplugin-auto-import 插件来自动导入 API(在SFC内)。

使用 unplugin-vue-components 插件来按需自动加载组件，插件会自动解析模板中的使用到的组件，并导入组件。（模板:SFC的template标签）(在SFC内)

安装unplugin插件

yarn add unplugin-auto-import
yarn add unplugin-vue-components

vite.config.ts文件

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { NaiveUiResolver } from 'unplugin-vue-components/resolvers'
import visualizer from 'rollup-plugin-visualizer';

export default defineConfig({
  plugins: [
    visualizer(),
    vue(),
    AutoImport({
      imports: [
        'vue',
        {
          'naive-ui': [
            'useDialog',
            'useMessage',
            'useNotification',
            'useLoadingBar'
          ]
        }
      ]
    }),
    Components({
      resolvers: [NaiveUiResolver()]
    })
  ]
})

main.ts文件

import { createApp } from "vue";
import App from "./App.vue";
import router from "@/router/index";
import { createPinia } from "pinia";
//import naive from "naive-ui";
import { setupDirectives } from "@/plugins";
import "@/permission";
const app = createApp(App);
app.use(createPinia());
setupDirectives(app);
app.use(router);
//app.use(naive);
app.mount("#app");

执行打包：

打包耗时：134秒

NaiveUI打包后的体积减小到 721KB

总结

通过配置 unplugin-auto-import 和 unplugin-vue-components 插件，打包速度减少了14秒，打包后的代码体积从2.1MB减少到700KB，减少了1.4MB的体积。

补充：

配置unplugin-auto-impor和unplugin-vue-components插件后的效果如下：

<template>
  <nInput v-model:value="msg" />
</template>

<script setup lang="ts">
// 插件解析SFC文件的时候会自动加上下面两行，可以省下引入组件和模块的工作量。提高开发效率。
// import { NInput } from 'naive-ui'
// import { ref } from 'vue'
const msg = ref('')
</script>