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>
相关推荐
一斤代码27 分钟前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子30 分钟前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年32 分钟前
从前端转go开发的学习路线
前端·学习·golang
中微子1 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina1 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路2 小时前
React--Fiber 架构
前端·react.js·架构
伍哥的传说2 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409192 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding2 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js
布兰妮甜2 小时前
Vue+ElementUI聊天室开发指南
前端·javascript·vue.js·elementui