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

js 复制代码
yarn add  rollup-plugin-visualizer

vite.config.ts文件

js 复制代码
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import visualizer from 'rollup-plugin-visualizer';

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

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

main.ts文件

js 复制代码
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插件

js 复制代码
yarn add unplugin-auto-import
yarn add unplugin-vue-components

vite.config.ts文件

js 复制代码
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文件

js 复制代码
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-importunplugin-vue-components 插件,打包速度减少了14秒,打包后的代码体积从2.1MB减少到700KB,减少了1.4MB的体积。

补充:

配置unplugin-auto-imporunplugin-vue-components插件后的效果如下:

vue 复制代码
<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>
相关推荐
千鼎数字孪生-可视化9 分钟前
Web技术栈重塑HMI开发:HTML5+WebGL的轻量化实践路径
前端·html5·webgl
凌辰揽月9 分钟前
7月10号总结 (1)
前端·css·css3
天天扭码32 分钟前
很全面的前端面试——CSS篇(上)
前端·css·面试
EndingCoder35 分钟前
搜索算法在前端的实践
前端·算法·性能优化·状态模式·搜索算法
sunbyte40 分钟前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | DoubleVerticalSlider(双垂直滑块)
前端·javascript·css·vue.js·vue
Favor_Yang44 分钟前
SQL Server通过存储过程实现HTML页面生成
前端·信息可视化·sqlserver·存储过程
中微子2 小时前
JavaScript事件循环机制:面试官最爱问的10个问题详解
前端
Eighteen Z2 小时前
CSS揭秘:10.平行四边形
前端·css·css3
拾光拾趣录2 小时前
虚拟DOM
前端·vue.js·dom
爱学习的茄子2 小时前
JavaScript事件循环深度解析:理解异步执行的本质
前端·javascript·面试