位置: IT常识 - 正文

vue3 + vite 性能优化 ( 从5s -> 0.5s )(vue3性能对比)

编辑:rootadmin
vue3 + vite 性能优化 ( 从5s -> 0.5s ) Ⅰ、Vue + Vite 构建项目性能优化vite 相比于 webpack 优势显著;然而 社区,却 不够成熟 ,参考资料较少;如何让vue + vite 构建项目变的 访问秒开 (要想足够快,就是让首次加载足够小),从下面几步做起 =>个人通过学生价购买的服务器,已达到0.5s内秒开 => 点击体验 文章目录Ⅰ、Vue + Vite 构建项目性能优化Ⅱ、Vue +Vite的优化有那些?1. ui组件库的优化2. Icon 图标优化3. js最小拆包4. 路由懒加载5. 个人vite.config 配置参考Ⅱ、Vue +Vite的优化有那些?1. ui组件库的优化 ui 组件库 是打包变大的 显著的原因之一 ,可能全量导入或批量导入了ui组件(去页面一次性加载了)如果只用到 ui 组件库的部分 ,如何做到用多少,打包多少 ?下面推荐一个 vite 的插件 (以 element Plus ,Antd of vue ,最常用的2中ui库来举例)

推荐整理分享vue3 + vite 性能优化 ( 从5s -> 0.5s )(vue3性能对比),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue3优点,vue3优点,vue3.0 vite,vue3性能对比,vue3性能对比,vue3.0 vite,vue3性能提升,vue3优缺点,内容如对您有帮助,希望把文章链接给更多的朋友!

① 安装:

npm i -D unplugin-vue-components

② main.js => 无需配置

main.js 不需要在 import 组件,再去use 绑定了 【注意:否则包变大,反而无效】直接用,用多少打包多少

③ 只需配置 => vite.config

import Components from 'unplugin-vue-components/vite' // 按需加载自定义组件import { ElementPlusResolver, AntDesignVueResolver} from 'unplugin-vue-components/resolvers'export default defineConfig { // ... plugins: [ // 按需引入 Components({ dts: true, dirs: ['src/components'], // 按需加载的文件夹 resolvers: [ ElementPlusResolver(), // Antd 按需加载 AntDesignVueResolver() // ElementPlus按需加载 ] }) ], // ..................................} dirs属性 => 设置 按需加载的文件夹 如 src/components ;该文件夹 的组件 不需要 import 按命名就可全局引入;ElementPlusResolver()、 AntDesignVueResolver() 分别为element Plus 和 Antd 按需导入方法;2. Icon 图标优化使用ui 组件库的图标,一般都会把一组Icon 图标 全部打包进去;如何优化呢,我们需要配合上面的插件 ↑;vue3 + vite 性能优化 ( 从5s -> 0.5s )(vue3性能对比)

① 安装插件

npm i -D unplugin-icons //安装

② 安装 Icon库 (全量 和 选择)

npm i -D @iconify/jsonnpm i -D @iconify-json/carbon => 只下载该图标集

③ 配置 vite.config

...import Components from 'unplugin-vue-components/vite'import Icons from 'unplugin-icons/vite'import IconsResolver from 'unplugin-icons/resolver'...export default { plugins: [ vue(), Components({ resolvers: [ IconsResolver(), ] }), Icons({ autoInstall: true }), ],}

④ vue 中 直接使用

i - 图标集名 - 标图名;直接使用 => 不需要任何导入;

⑤ 示例如下

<i-carbon-4k />

Icon 图标集 地址 : 点击这里 => Antd 、element Plus 都有3. js最小拆包配置vite.config 的 output 属性 output: { // 最小化拆分包 manualChunks(id) { if (id.includes('node_modules')) { return id.toString().split('node_modules/')[1].split('/')[0].toString(); } } },让打开那个页面,加载那个页面的js ,让之间的关联足够小按需加载 js 每个页面的 js 逻辑4. 路由懒加载路由 懒加载就是最常规的啦采用 () => import(’/…’) 来导入 5. 个人vite.config 配置参考

达到效果 => 点击体验

import { defineConfig } from "vite"; // 帮手函数,这样不用 jsdoc 注解也可以获取类型提示import { resolve } from "path"; // 主要用于alias文件路径别名import vue from '@vitejs/plugin-vue';import Components from 'unplugin-vue-components/vite';// icon 按需引入import Icons from 'unplugin-icons/vite';import IconsResolver from 'unplugin-icons/resolver';// Antd 按需引入import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'export default defineConfig({ plugins: [ vue(), // 配置需要使用的插件列表 Components({ resolvers: [ IconsResolver(), AntDesignVueResolver() ] }), Icons({ autoInstall: true }), ], css: { preprocessorOptions: { less: { javascriptEnabled: true, }, }, }, resolve: { alias: { "/@": resolve("src"), } }, // 强制预构建插件包 optimizeDeps: { include: ['axios'], //用于鉴权 }, // 打包配置 build: { target: 'modules', outDir: 'dist', //指定输出路径 assetsDir: 'assets', // 指定生成静态资源的存放路径 rollupOptions: { minify: 'terser',// 混淆器,terser构建后文件体积更小 output: { manualChunks(id) { if (id.includes('node_modules')) { return id.toString().split('node_modules/')[1].split('/')[0].toString(); } } }, }, }, server: { // 本地 - 运行配置,及反向代理配置 cors: true, // 默认启用并允许任何源 open: true, // 在服务器启动时自动在浏览器中打开应用程序 proxy: { '/api': { target: 'http://localhost:7001', //代理接口 changeOrigin: true, } } }})
本文链接地址:https://www.jiuchutong.com/zhishi/287197.html 转载请保留说明!

上一篇:阿查法拉亚盆地中的一棵柏树,路易斯安那州 (© Chris Moore/Tandem Still + Motion)(阿查法拉亚盆地 钓鱼)

下一篇:在anaconda下安装pytorch + python3.8+GPU/CPU版本 详细教程(在anaconda下安装python)

  • 真男人的故事(真男人的段子)

    真男人的故事(真男人的段子)

  • 一加10pro跑分

    一加10pro跑分

  • 微信朋友圈位置怎么定位到别的城市(微信朋友圈位置怎么改到别的城市)

    微信朋友圈位置怎么定位到别的城市(微信朋友圈位置怎么改到别的城市)

  • ios安装描述文件安全吗(ios安装描述文件失败)

    ios安装描述文件安全吗(ios安装描述文件失败)

  • 淘宝保证金1000退不了(淘宝保证金1000必须交吗)

    淘宝保证金1000退不了(淘宝保证金1000必须交吗)

  • 陌陌隐身了还能被发现(陌陌隐身了还能出现在附近的人)

    陌陌隐身了还能被发现(陌陌隐身了还能出现在附近的人)

  • 8P怎么越用声音越小(苹果8越用声音越小)

    8P怎么越用声音越小(苹果8越用声音越小)

  • word怎么打破折号(如何在word里打破折号)

    word怎么打破折号(如何在word里打破折号)

  • 美团车忘记关锁怎么办(美团车忘记关锁了)

    美团车忘记关锁怎么办(美团车忘记关锁了)

  • 在多媒体系统中,内存和光盘属于什么(在多媒体系统中MPC)

    在多媒体系统中,内存和光盘属于什么(在多媒体系统中MPC)

  • 华为平板m5怎么分屏(华为平板M5怎么分屏一半一半)

    华为平板m5怎么分屏(华为平板M5怎么分屏一半一半)

  • 乐心手环启动键在哪里(乐心手环启动键失灵)

    乐心手环启动键在哪里(乐心手环启动键失灵)

  • 什么储存器属于主机部分(属于储存器的是)

    什么储存器属于主机部分(属于储存器的是)

  • 苹果8p能升级ios13.3吗(苹果8p能升级ios16吗)

    苹果8p能升级ios13.3吗(苹果8p能升级ios16吗)

  • ppt保存快捷键(wps卡住了,但电脑没卡,怎么办)

    ppt保存快捷键(wps卡住了,但电脑没卡,怎么办)

  • 苹果11通话记录保存多久(苹果11通话记录怎么查询更早)

    苹果11通话记录保存多久(苹果11通话记录怎么查询更早)

  • 小米投影仪青春版不能手动调屏幕大小吗(小米投影仪青春版2怎么用手机遥控)

    小米投影仪青春版不能手动调屏幕大小吗(小米投影仪青春版2怎么用手机遥控)

  • 如何制作word文档表格(如何制作Word文档电脑)

    如何制作word文档表格(如何制作Word文档电脑)

  • 苹果机日历怎么设置节日(苹果手机日历怎么用更有效率)

    苹果机日历怎么设置节日(苹果手机日历怎么用更有效率)

  • esxi是什么系统(esxi好用吗)

    esxi是什么系统(esxi好用吗)

  • 什么叫闪电接头(什么叫闪电接头图片)

    什么叫闪电接头(什么叫闪电接头图片)

  • 苹果11后背是玻璃吗(苹果11后背玻璃容易碎吗)

    苹果11后背是玻璃吗(苹果11后背玻璃容易碎吗)

  • ps立体字的做法(ps立体字效果制作教程)

    ps立体字的做法(ps立体字效果制作教程)

  • oppo手机如何直接刷掉密码(OPPO手机如何直接下载到内存卡上)

    oppo手机如何直接刷掉密码(OPPO手机如何直接下载到内存卡上)

  • 观看历史在哪删除(观看历史在哪删除记录)

    观看历史在哪删除(观看历史在哪删除记录)

  • 华为p30pro卡槽如何打开(华为p30pro卡槽如何打开双卡)

    华为p30pro卡槽如何打开(华为p30pro卡槽如何打开双卡)

  • iphonex到货验货步骤(iphone手机验货)

    iphonex到货验货步骤(iphone手机验货)

  • 变化检测(Change Detection,CD) 综述2篇 & CD代码 & 常用CD数据集及链接(变化检测是应用在图像的哪个运算中)

    变化检测(Change Detection,CD) 综述2篇 & CD代码 & 常用CD数据集及链接(变化检测是应用在图像的哪个运算中)

  • 购销合同印花税按70%
  • 企业个人所得税税率表2023
  • 普通增值税税率多少
  • 高新企业收到政府补贴怎么做账
  • 金税四期可以查个人账户吗
  • 外经证错了已经交了税怎么办
  • 结转净利润到利润分配分录
  • 房地产企业印花税税目
  • 银行会计错账冲正方法
  • 营改增之前
  • 月末本年利润余额怎么算
  • 部门会议要点
  • 以前年度漏记一笔短期借款但本金利息支出记账了
  • 投资款怎样缴印花税?
  • 装卸增值税税率最新的
  • 绿植租赁公司都适合什么名字
  • 小规模纳税人怎么算税
  • 金融企业呆账准备金是否允许补提
  • 合伙项目如何进行分红
  • 一般户收到基本户转账的会计分录
  • 商品和安装能开什么发票
  • 支付税点是什么意思
  • 税率抵扣计算公式
  • 银行退回手续费的账务处理
  • 无法打开exe程序
  • 罗汉松的养殖方法剪枝视频
  • 车辆购置税相关知识
  • 车辆购置税退税计算
  • 建筑行业总分包怎么算
  • 没进项可以开专票吗
  • 学计算机选择什么专业
  • 填写发票票种核实怎么填
  • 分公司要所得税汇算吗
  • 保险支票托收
  • 开发商提供物业用房的法律依据
  • 应付职工薪酬账户的明细账户有
  • 物业公司收取的电费怎么确认收入
  • SQL Server实现split函数分割字符串功能及用法示例
  • 商场超市收银员每日工作流程
  • mysql相关
  • 代理记账公司账务很乱能接吗
  • 技术服务费可以计入成本吗
  • 计提职工薪酬是什么意思
  • 年化收益率和年利率区别
  • 增资减资改变股东要交税吗
  • 小规模纳税人减按1%账务处理
  • 对公账户的钱怎么用
  • 季节性停工固定资产折旧计入什么科目
  • 租赁出租人分录
  • 进项发票已认证未抵扣分录
  • 支票取钱不是本人要带什么
  • sqlserver数据库优化的几种方式
  • mysql检查表是否存在
  • mysql修改密码错误
  • 苹果序列号查询
  • ipad文件使用技巧
  • windows server2012安装完没有桌面
  • 光纤拨号方式
  • windows7命名规则
  • win8windows设置在哪里
  • win10系统edge浏览器无法调用F12
  • win7怎连蓝牙
  • js实例教程
  • jquery mouse
  • css控制图片置灰
  • python的判断语句
  • javascript几种数据类型
  • jQuery中select与datalist制作下拉菜单时的区别浅析
  • 显示解析包时出错是怎么回事
  • linux删除文件语句
  • js读取cookies
  • python入门小程序编写
  • javascript基础编程
  • javascript含义
  • 厦门增值税发票查询
  • 广西的高速怎么一段收费一段不收费
  • 转让专利权取得的所得属于财产转让所得吗
  • 上海市浦东新区人民医院
  • 农副产品免税最低多少
  • 个人所得税税收完税证明哪里打印
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设