位置: IT常识 - 正文

vite项目优化(项目优化管理工具)

编辑:rootadmin
vite项目优化

推荐整理分享vite项目优化(项目优化管理工具),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:项目优化设计,项目优化方法,优化项目 英文,项目优化是什么,web项目优化,项目优化是什么,vericut优化,项目优化管理工具,内容如对您有帮助,希望把文章链接给更多的朋友!

首先在讲述vite优化之前,我们先来分析一下和传统的项目管理构建工具的区别,以webpack为例,它是利用plugin插件和loader加载器对项目的所有模块和依赖统一通过入口文件进行编译,从而变成我们html所需要的js格式渲染我们的页面。

随着浏览器的发展,逐渐的已经支持了 ES 模块

因此Vite在设计时考虑在浏览器请求源码时进行转换并按需提供源码。根据情景动态导入代码,即只在当前屏幕上实际使用时才会被处理。

vite项目优化(项目优化管理工具)

优势: 这样就避免了随着应用体积的增大,导致了启动服务缓慢,一处代码更新界面需要数秒钟才能显示的问题。运行速度真的没得说。

同样的,作为一个新型的构建框架,也有很多的弊端。 缺点: 只能针对现代浏览器(ES2015+)、生态小等。

当然我们今天说的不止是这些,既然选择了vite框架,自然不会考虑浏览器的兼容性,我们更多的还是关注vite本身的性能。

优势即劣势

正是因为vite本身是动态加载的资源,当某个路由的依赖项比较多的时候,加上你可能使用了某些组件库的按需加载(比如element-plus),在进入页面时可谓是很慢,而且页面都是会像卡壳了一样刷新一次。

技术层观察的表现是,network加载了很多资源,同时在cmd终端会显示:

下午7:01:09 [vite] ✨ new dependencies optimized: element-plus/es/components/message-box/style/index下午7:01:09 [vite] ✨ optimized dependencies changed. reloading下午7:01:23 [vite] ✨ new dependencies optimized: element-plus/es/components/form/style/index下午7:03:57 [vite] vite.config.ts changed, restarting server...

这是因为需要按需写入组件与样式导致的,那么怎么解决这一问题呢,我们更希望在开发环境下,能提高我们的运行速度,而且让生成环境的包体积更小。然而,好像没有太好的解决方案,因为第一次按需加载按照vite的设计就必须要写入。

换个思路,那么我只能在开发环境下全局加载组件,打包时再执行按需加载了…

// 自定义插件 ./plugins/fullImportPluginimport * as path from 'path'import type { Plugin, ResolvedConfig } from 'vite'export default function fullImportPlugin () { let config: ResolvedConfig return <Plugin>{ name: 'fullImportElementPlus', async configResolved (conf) { config = conf }, transform (code, id) { // 判断当前处理的是否是 _src/main.ts_ if (path.join(config.root, 'src/main.ts') === id) { const name = 'ElementPlus' // 引入 ElementPlus 和 样式 const prepend = `import ${name} from 'element-plus';\nimport 'element-plus/theme-chalk/src/index.scss';\n` code = code.replace('.mount(', ($1) => `.use(${name})` + $1) return prepend + code } return code } }}// vite.config.tsimport { ElementPlusResolver } from 'unplugin-vue-components/resolvers'import unElementPlus from 'unplugin-element-plus/vite'import unComponents from 'unplugin-vue-components/vite'import fullImportPlugin from './plugins/fullImportPlugin'const config = {plugins:[]}if ( modes === 'development'){ config.plugins.push(fullImportPlugin())} else { config.plugins.push(unElementPlus({ useSource: true })) config.plugins.push(unComponents({ dirs:[], dts: true, resolvers: [ ElementPlusResolver() ] }))}export default config
本文链接地址:https://www.jiuchutong.com/zhishi/284109.html 转载请保留说明!

上一篇:最亮的投影机是什么(投影仪哪种光源亮度高)

下一篇:Win7系统利用家庭组把多台电脑资源共享的方法(win7家庭组怎么用)

  • 刘邦也曾轻敌过(刘邦战败)

    刘邦也曾轻敌过(刘邦战败)

  • 打开rar文件的软件(打开rar的电脑软件)

    打开rar文件的软件(打开rar的电脑软件)

  • 快手申请仲裁是什么意思(快手退款申请仲裁会被退款吗)

    快手申请仲裁是什么意思(快手退款申请仲裁会被退款吗)

  • 为什么卖家怕淘宝介入(为什么卖家怕差评)

    为什么卖家怕淘宝介入(为什么卖家怕差评)

  • 如何才能让微信不封号(如何才能让微信不限额)

    如何才能让微信不封号(如何才能让微信不限额)

  • 微信步数多久自动刷新(微信步数多久归零)

    微信步数多久自动刷新(微信步数多久归零)

  • 信号显示4g+是什么意思(手机信号显示4gr)

    信号显示4g+是什么意思(手机信号显示4gr)

  • 被移出群聊意味着什么(被移出群聊是什么)

    被移出群聊意味着什么(被移出群聊是什么)

  • 华为荣耀x10什么时候出(华为荣耀X10什么时候出的)

    华为荣耀x10什么时候出(华为荣耀X10什么时候出的)

  • 计算机辅助教学cat是什么软件(计算机辅助教学简称)

    计算机辅助教学cat是什么软件(计算机辅助教学简称)

  • 苹果手机面容id识别不了怎么办(苹果手机面容id可以设置两个人的吗)

    苹果手机面容id识别不了怎么办(苹果手机面容id可以设置两个人的吗)

  • 华为p20lite是什么手机(华为p20lite多少钱国内)

    华为p20lite是什么手机(华为p20lite多少钱国内)

  • word中文字下怎么画横线(word文字下怎么加线)

    word中文字下怎么画横线(word文字下怎么加线)

  • 拍立得已装相纸怎么过安检(拍立得已装相纸过地铁安检)

    拍立得已装相纸怎么过安检(拍立得已装相纸过地铁安检)

  • 苹果11和xsmax区别

    苹果11和xsmax区别

  • 网络机顶盒怎么连电脑(网络机顶盒怎么连接电视)

    网络机顶盒怎么连电脑(网络机顶盒怎么连接电视)

  • 华为rcs是什么意思(华为rcs功能怎么开启)

    华为rcs是什么意思(华为rcs功能怎么开启)

  • iphonex耗电快修复方法(苹果x耗电过快)

    iphonex耗电快修复方法(苹果x耗电过快)

  • 买家如何在小程序退款(怎么在小程序买东西)

    买家如何在小程序退款(怎么在小程序买东西)

  • 手机密码打不开怎么办(oppo手机密码打不开)

    手机密码打不开怎么办(oppo手机密码打不开)

  • 手机拼多多怎么备注(手机拼多多怎么设置新疆西藏不发货)

    手机拼多多怎么备注(手机拼多多怎么设置新疆西藏不发货)

  • 苹果11pro max颜色(苹果11pro max颜色价格一样吗)

    苹果11pro max颜色(苹果11pro max颜色价格一样吗)

  • wifi后面wps是啥意思(wifi的wps是什么意思)

    wifi后面wps是啥意思(wifi的wps是什么意思)

  • 苹果xr怎么关手电筒(苹果XR怎么关手电筒)

    苹果xr怎么关手电筒(苹果XR怎么关手电筒)

  • xs xr区别(xs xr什么区别 哪个更好)

    xs xr区别(xs xr什么区别 哪个更好)

  • 带手机壳会影响散热吗(带手机壳会影响拍照吗)

    带手机壳会影响散热吗(带手机壳会影响拍照吗)

  • 2020 年 deepin 深度操作系统 V20 更新 附更新内容(deepin20.1怎么样)

    2020 年 deepin 深度操作系统 V20 更新 附更新内容(deepin20.1怎么样)

  • 目标检测算法——YOLOv7改进|增加小目标检测层(目标检测算法有哪些)

    目标检测算法——YOLOv7改进|增加小目标检测层(目标检测算法有哪些)

  • 企业所得税属于地方税吗
  • 异地预缴可以退吗
  • 美国报税用什么软件
  • 印花税计入什么科目会计分录
  • 个人所得税怎么扣除标准
  • 租土地使用权建房
  • 应付账款转营业外收入进项税转出
  • 票据承兑和贴现市场上最主要的交易对象是( )
  • 非营利组织免交的增值税转入哪个科目
  • 人民币报关出口跨境
  • 货物发出未开票不确认收入
  • 外贸企业需要交哪些税费
  • 从两处领取工资,个人所得税应该如何申报缴纳?
  • 个体户需不需要银行开户
  • 增值税发票国家收几个点的钱
  • 缴纳车船税的车辆
  • 个体户免税额度超出了
  • 总额法和净额法哪个合理
  • 业务奖金激励制度
  • 小微企业增值税减免政策
  • 科研费收入如何入账?
  • 英雄联盟符文推荐怎么不弹出来
  • bootmgr is missing怎么手动解决
  • 系统备份工具
  • 开红字发票后再开蓝字发票应如何入账?
  • 把输入法关闭
  • linux 网络故障
  • 增值税发票销货清单哪里领
  • wrme.exe是什么
  • 工会经费用途规定
  • 应付债券的会计分录有哪些
  • 现金流量表的编报时间有
  • 火车票可以直接去火车站买吗
  • springcloud阿里巴巴
  • cd相关命令
  • 不良品扣款应入哪个科目
  • 农民工工资专用账户打款比例
  • 一笔购入多项固定资产
  • 社会团体费用报销制度
  • 固定资产原值增加当月计提折旧吗
  • sql分页存储过程
  • 利润表中本期金额是什么意思
  • 出售无形资产净损益
  • 含税销售收入会计分录
  • 纳税人防伪税控设备未抄报怎么办
  • 财务费用多计怎么做账
  • 银行存款支付投资者投入的款项54万
  • 软件公司购进软件会计科目
  • 财务费用明细账图片
  • 做无票收入如何报税
  • 盘亏的固定资产是资产吗
  • 短期借款明细账采用什么格式
  • 其他应收款款项性质如何填写
  • 公司被私募基金收购有啥影响 裁员
  • sql server外连接查询
  • 数据库备份怎么做mysql
  • win 10怎么更换系统
  • WINDOWS操作系统属于什么操作系统
  • mac os固件下载
  • win7安装软件后所有打开变成记事本
  • win8虚拟内存怎么设置最好
  • win7如何升级到win10有什么要求
  • js如何使用
  • supervisor producer
  • jquery animate源码
  • bat批处理的if里面双感叹号
  • javascript总结笔记
  • 用nodejs做的项目
  • unity script api
  • android数据存储实验报告
  • 如何用android
  • Jquery实现select multiple左右添加和删除功能的简单实例
  • 如何在税务系统缴纳医保
  • 购买的环保设备未使用检察建议
  • 赞美税务工作者的诗句
  • 新疆12366电子税务局官网手机版
  • 黔南州都匀市是哪个省
  • 税控盘如何下载驱动程序及安全控件
  • 物业管理用房如何缴纳房产税
  • 重庆地税电子税务局app
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设