位置: 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家庭组怎么用)

  • vivox27pro和x27的区别(vivox27x27pro对比)

    vivox27pro和x27的区别(vivox27x27pro对比)

  • 微信可以一直设置强提醒吗(微信一直设置不了零钱支付)

    微信可以一直设置强提醒吗(微信一直设置不了零钱支付)

  • 手机微信视频超过5分钟怎么发给微信朋友(手机微信视频超大怎么办)

    手机微信视频超过5分钟怎么发给微信朋友(手机微信视频超大怎么办)

  • 苹果11不能指纹解锁吗(苹果手机有没有指纹)

    苹果11不能指纹解锁吗(苹果手机有没有指纹)

  • 抖音扫一扫彩蛋是什么(2021年抖音彩蛋是什么东西)

    抖音扫一扫彩蛋是什么(2021年抖音彩蛋是什么东西)

  • 微信怎么向别人收款(微信怎么向别人的支付宝转账)

    微信怎么向别人收款(微信怎么向别人的支付宝转账)

  • 手机照片jpg格式是什么意思(手机照片jpg格式怎么弄)

    手机照片jpg格式是什么意思(手机照片jpg格式怎么弄)

  • 小米9是屏幕指纹吗(小米9屏幕指纹校准失败)

    小米9是屏幕指纹吗(小米9屏幕指纹校准失败)

  • 爱奇艺会员登录失效是什么原因(爱奇艺会员登录奇异果怎么不是会员了)

    爱奇艺会员登录失效是什么原因(爱奇艺会员登录奇异果怎么不是会员了)

  • 打印机灯闪烁代表什么(打印机指示灯一闪一闪)

    打印机灯闪烁代表什么(打印机指示灯一闪一闪)

  • 怎么给word加边框(怎么给word加边框线)

    怎么给word加边框(怎么给word加边框线)

  • power shell是什么(windospowershell是什么)

    power shell是什么(windospowershell是什么)

  • 华为怎么看电池寿命(华为怎么看电池容量)

    华为怎么看电池寿命(华为怎么看电池容量)

  • 显卡自带声卡吗(显卡自带声卡吗怎么设置)

    显卡自带声卡吗(显卡自带声卡吗怎么设置)

  • 天猫精灵支持哪些电视(天猫精灵支持哪些音乐app)

    天猫精灵支持哪些电视(天猫精灵支持哪些音乐app)

  • Reno Ace怎么打开省电模式(reno ace rom)

    Reno Ace怎么打开省电模式(reno ace rom)

  • 荣耀手机怎么调24小时制(荣耀手机怎么调时间和日期)

    荣耀手机怎么调24小时制(荣耀手机怎么调时间和日期)

  • 苹果怎么设置生日倒数(苹果怎么设置生日提醒功能)

    苹果怎么设置生日倒数(苹果怎么设置生日提醒功能)

  • word怎样设置行数(word怎样设置行高)

    word怎样设置行数(word怎样设置行高)

  • QQ如何把地址定位分享给好友(qq如何把地址定位改了)

    QQ如何把地址定位分享给好友(qq如何把地址定位改了)

  • vivo手机怎样把返回键找出来(vivo手机怎样把照片传到电脑上)

    vivo手机怎样把返回键找出来(vivo手机怎样把照片传到电脑上)

  • vivoy97能指纹支付吗(vivoy97有指纹)

    vivoy97能指纹支付吗(vivoy97有指纹)

  • 爱奇艺如何下载视频(爱奇艺如何下载mp4格式的视频)

    爱奇艺如何下载视频(爱奇艺如何下载mp4格式的视频)

  • 小米mix3耳机孔插哪(小米max3耳机孔)

    小米mix3耳机孔插哪(小米max3耳机孔)

  • 一般纳税人开普票税率是3%还是13%
  • 所得税申报表的营业成本包括费用吗
  • 行政单位要不要税号
  • 固定资产盘盈影响所有者权益吗
  • 生产车间的办公用品费计入
  • 买手机手续费怎么算
  • 税控盘如何统计开票金额
  • 上季度所得税申报怎么填
  • 其他应收款账龄怎么算
  • 一般纳税人什么时候用简易计税
  • 计入其他收益需要结转吗
  • 房地产开发企业销售自行开发的房地产项目
  • 门诊收入免税会增加吗
  • 完全发生在境外的服务增值税
  • 房地产母公司将其土地变更到其全资子公司
  • 2018年高新技术企业所得税
  • 纳税人识别号和税号是一个意思吗
  • 实收资本印花税最新规定
  • 未分配50g
  • 从银行贷款转借他人法院如何判
  • 没有签订合同需要申报印花税吗
  • 现金支出有哪些项目
  • 个人股东企业分红一共需要交多少税
  • 如何在没有开瓶器的情况下开红酒
  • 福利费不需要发票
  • 小宝宝耸肩膀缩脖子
  • php中字符串函数
  • PHP:preg_last_error()的用法_PCRE正则函数
  • AriaNg Native 1.2.4 Aria2图形界面下载工具 中文免费版 32/64位
  • 分批付款怎么确认收入
  • 没有上报汇总就申报了
  • 发票中的密码区是如何形成的
  • ntpq命令详解
  • 小微企业所得税优惠政策2023
  • 收到招标文件怎么回函
  • 增值税申报表中销售额
  • 增值税专用发票有几联?
  • python 索引-1
  • python tkinter entry用法
  • 其它应收款的处理程序
  • 代销费是谁给谁
  • 支付债券发行费怎么算
  • 哪些进项税不允许从销项税额中抵扣
  • 口罩属于什么经济分类
  • 转账进公户
  • 财务费用报销流程最后环节出纳
  • 生产成本可以结转到主营业务成本吗
  • 应交税费会计核算
  • 销售返利的账务处理案例
  • 顺流交易为什么不考虑出售比例
  • 传媒公司的骗局把戏
  • 费用报销如何做账务处理分录
  • 公司买汽车计入什么费用
  • 本月多交的增值税
  • 审车费用表
  • 科目怎么写?
  • 买公司的钱计入什么科目
  • 房地产企业什么时候停止预缴增值税
  • 会计错账更正方法口诀
  • sql报无效字符
  • mysql查询单条数据
  • Ubuntu Kylin 14.10默认的屏幕分辨率怎么更改?
  • 电脑显示windowsxp不能进入桌面
  • xp系统桌面图标不见了,点什么都没用?
  • windows8语言栏不见了
  • win7如何设置桌面背景图
  • win8怎么进去安全系统
  • windows7 游戏
  • 当ie7不认!important之后 [布局的解决办法]
  • opengl 缓存
  • Javascript typeof与instanceof的区别
  • css选择器怎么写
  • 如何利用工具人
  • python怎么弄中文
  • javascript获取对象方法属性
  • 怎样查询灵活就业养老保险缴费记录
  • 税务文书保存期限分几类
  • 潍坊市滨海经济开发区属于哪里
  • 税收通知
  • 网上怎么开电子一票通
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设