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

  • 微信预约挂号怎样添加就诊人(微信预约挂号怎么退款)

    微信预约挂号怎样添加就诊人(微信预约挂号怎么退款)

  • 怎么查看微信有没有异常(怎么查看微信有没有在电脑登录)

    怎么查看微信有没有异常(怎么查看微信有没有在电脑登录)

  • 小红书怎么自定义配乐(小红书怎么自定义图文封面)

    小红书怎么自定义配乐(小红书怎么自定义图文封面)

  • 苹果浅色深色模式无法切换(苹果浅色深色模式怎么用)

    苹果浅色深色模式无法切换(苹果浅色深色模式怎么用)

  • 导航条可以是文字链接和什么链接(导航条可以是文字链接和什么链接一起用)

    导航条可以是文字链接和什么链接(导航条可以是文字链接和什么链接一起用)

  • 华为nova7se怎样截屏(华为nova7se怎样删除桌面一些软件)

    华为nova7se怎样截屏(华为nova7se怎样删除桌面一些软件)

  • 苹果手机哪些自带软件可以删除(苹果手机哪些自带软件不可以删除)

    苹果手机哪些自带软件可以删除(苹果手机哪些自带软件不可以删除)

  • 电脑突然自动关机了再按电源打不开(电脑突然自动关机重启)

    电脑突然自动关机了再按电源打不开(电脑突然自动关机重启)

  • 手机怎么查看qq邮箱号(手机怎么查看qq的q龄)

    手机怎么查看qq邮箱号(手机怎么查看qq的q龄)

  • 小新pro和小新air区别(小新pro和小新air有什么区别)

    小新pro和小新air区别(小新pro和小新air有什么区别)

  • 5g是什么概念(5g是什么概念什么意思)

    5g是什么概念(5g是什么概念什么意思)

  • airpods pro有杂音滋滋怎么解决(Airpods Pro有杂音怎么维修)

    airpods pro有杂音滋滋怎么解决(Airpods Pro有杂音怎么维修)

  • b站历史记录怎么关闭(b站历史记录怎么删除不了了)

    b站历史记录怎么关闭(b站历史记录怎么删除不了了)

  • mdt6是什么型号(mde6s什么型号多少钱)

    mdt6是什么型号(mde6s什么型号多少钱)

  • ps如何制作立体图形(ps如何制作立体竖条)

    ps如何制作立体图形(ps如何制作立体竖条)

  • 苹果7能不能用无线耳机(苹果7能不能用NFC刷门禁卡)

    苹果7能不能用无线耳机(苹果7能不能用NFC刷门禁卡)

  • 手机进水花屏怎么办(手机进水花屏怎么关机)

    手机进水花屏怎么办(手机进水花屏怎么关机)

  • 荣耀20s怎么关闭悬浮球(荣耀20s怎么关闭hd)

    荣耀20s怎么关闭悬浮球(荣耀20s怎么关闭hd)

  • 淘宝直播如何小窗口播放(淘宝直播怎么开启小窗)

    淘宝直播如何小窗口播放(淘宝直播怎么开启小窗)

  • 苹果11支持反向充电吗(苹果支持反向充电的手机有哪些型号)

    苹果11支持反向充电吗(苹果支持反向充电的手机有哪些型号)

  • 不让微信显示电话号码(不让微信显示电话)

    不让微信显示电话号码(不让微信显示电话)

  • 小米5怎么恢复出厂设置(小米5怎么恢复出厂设置手机)

    小米5怎么恢复出厂设置(小米5怎么恢复出厂设置手机)

  • ios12能退回去吗(苹果12退回)

    ios12能退回去吗(苹果12退回)

  • 如何拼照片(如何拼照片九宫格)

    如何拼照片(如何拼照片九宫格)

  • 华为nova5pro和nova5有什么区别(华为nova5pro和nova7pro哪个好)

    华为nova5pro和nova5有什么区别(华为nova5pro和nova7pro哪个好)

  • Redis源码---整体架构(redis zset源码)

    Redis源码---整体架构(redis zset源码)

  • 员工扣了个税但没交给税务局
  • 车险发票不含车船税怎么记账
  • 折扣方式销售货物增值税
  • 简易计税是否要申报个税
  • 购入股票作为短期投资是什么凭证
  • 有会计从业资格证还有用吗
  • 工程收入开票
  • 一次性计提后的固定资产残值
  • 经营利润和营业利润的区别
  • 医院会计制度准则
  • 持有的汇票到期后怎么办
  • 购买税控设备怎么抵扣
  • 危废处置费用怎么开票
  • 银行代扣印花税
  • 广告制作费有哪些项目
  • 民办非企业是否可以出资设立公司
  • 资本公积与股东借款
  • 公积金贷款利息现在是多少
  • 什么叫抵免
  • 去年的财务费用忘记帐能入今年的账吗?
  • 政府装修补贴政策
  • mac安装软件不用密码
  • 实收资本怎么用
  • windows11激活密钥多少钱
  • php 字符串函数
  • 分公司收到总公司拨款怎么做分录
  • 应交消费税的会计分录
  • PHP:pg_result_error_field()的用法_PostgreSQL函数
  • 审核凭证要注意哪些问题
  • 微软windows11iso
  • 融资租赁账务处理实例承租方
  • 应交税费会计分录例题
  • 投资者追加资本金属于什么
  • thinkphp域名路由
  • Yii2 rbac权限控制之菜单menu实例教程
  • 生产车间工资计提
  • 汽车4s店一般会摆放什么小零食
  • 补缴当年增值税税款和滞纳金如何记账
  • vue中事件
  • 如何查询数据库表空间
  • laravel实战教程
  • 收到股东投资款现金流量表入哪一项
  • 跨年专票红冲步骤
  • 微信转账要如何退回去
  • pycharm pypy
  • 员工意外伤害保险可以抵扣进项税吗
  • 报销宽带费属于什么费用
  • 免税普票要交企业所得税吗
  • 销售自用的生产设备一台
  • 销售自己使用过的固定资产
  • 房地产企业成本核算方法
  • 收入结转到本年利润的会计分录
  • 小规模纳税人开专票税率是1%还是3%
  • 成本法长期股权投资初始成本确认
  • 辅助生产车间的制造费用不通过制造费用核算
  • 原材料运费如何入账
  • 转账支票填写样本图片
  • 金税盘未清盘怎么处理
  • 一般纳税人增值税优惠政策2023
  • c++ 虚数
  • sqlserver CONVERT()函数用法小结
  • win8怎么格式化硬盘
  • 怎么配置命令
  • linux系统中
  • qtaet2s.exe - qtaet2s是什么进程 有什么用
  • os x 10.10.5
  • 用简洁的语言推荐一本书
  • vue自定义方法
  • android指南针源码
  • unity游戏项目开发教程
  • javascript 拖拽
  • python dict 转 list
  • python周期性分析
  • 山东发票查询系统平台
  • 辽宁地方税务局发票查询
  • 海南省税务局长
  • 打单子的打印机能否打a4的纸
  • 消费税的征税范围包括
  • 非居民企业通俗指
  • 高山白茶和普通白茶的区别
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设