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

  • 流量中的KB,MB,GB代表的是什么(流量中的m是多少)

    流量中的KB,MB,GB代表的是什么(流量中的m是多少)

  • 华为荣耀v20充电时有灯亮吗(华为荣耀v20充电器)

    华为荣耀v20充电时有灯亮吗(华为荣耀v20充电器)

  • 荣耀v20与华为mate20对比(荣耀v20与华为p30参数对比)

    荣耀v20与华为mate20对比(荣耀v20与华为p30参数对比)

  • 苹果音乐是无损音乐吗(苹果音乐无损和高解析度无损)

    苹果音乐是无损音乐吗(苹果音乐无损和高解析度无损)

  • 苹果手机被禁止获取免费APP怎么办(苹果手机被禁止获取免费APP是什么原因)

    苹果手机被禁止获取免费APP怎么办(苹果手机被禁止获取免费APP是什么原因)

  • 2万毫安充电宝充满需要多久(2万毫安充电宝能充几次电)

    2万毫安充电宝充满需要多久(2万毫安充电宝能充几次电)

  • 芒果视频弹幕在哪里设置(芒果视频弹幕在哪里关闭)

    芒果视频弹幕在哪里设置(芒果视频弹幕在哪里关闭)

  • 红米k30解锁方式(redmi k30s解锁方式)

    红米k30解锁方式(redmi k30s解锁方式)

  • 华为全国联保是什么意思(华为全国联保是免费的吗)

    华为全国联保是什么意思(华为全国联保是免费的吗)

  • 钉钉可以看到学生的屏幕吗(钉钉可以看到学生开悬浮窗吗)

    钉钉可以看到学生的屏幕吗(钉钉可以看到学生开悬浮窗吗)

  • vivox30网速卡怎么回事(vivox30手机网速慢)

    vivox30网速卡怎么回事(vivox30手机网速慢)

  • 嘀嗒出行要先付款吗(嘀嗒出行要先付款后交钱吗)

    嘀嗒出行要先付款吗(嘀嗒出行要先付款后交钱吗)

  • 微信电话不挂闹铃会响吗(微信电话怎么不挂)

    微信电话不挂闹铃会响吗(微信电话怎么不挂)

  • 组成网络的必须设备有哪些(构成网络的要素分别是什么)

    组成网络的必须设备有哪些(构成网络的要素分别是什么)

  • 腾讯视频怎么换皮肤(腾讯视频怎么换绑定手机号)

    腾讯视频怎么换皮肤(腾讯视频怎么换绑定手机号)

  • 华为畅享10提示灯在哪(华为畅享10提示灯)

    华为畅享10提示灯在哪(华为畅享10提示灯)

  • 魅族隐私模式怎么关闭(魅族隐私模式怎么找不到了)

    魅族隐私模式怎么关闭(魅族隐私模式怎么找不到了)

  • 手机搜索候选关不了(手机搜索候选关注怎么弄)

    手机搜索候选关不了(手机搜索候选关注怎么弄)

  • 抖音评论怎么发图片(抖音评论怎么发搜索链接)

    抖音评论怎么发图片(抖音评论怎么发搜索链接)

  • 苹果手机云盘相册在哪(苹果手机相册云盘)

    苹果手机云盘相册在哪(苹果手机相册云盘)

  • 怎么批量设置行高(excel2007怎么批量设置行高)

    怎么批量设置行高(excel2007怎么批量设置行高)

  • vivox21录屏在哪设置声音(vivox21a的录屏在哪里)

    vivox21录屏在哪设置声音(vivox21a的录屏在哪里)

  • ddub一al20是什么型号(dub一alo0a)

    ddub一al20是什么型号(dub一alo0a)

  • axios请求中以params或body形式传递参数的区别(axios请求数据的数据类型)

    axios请求中以params或body形式传递参数的区别(axios请求数据的数据类型)

  • 借款合同印花税怎么申报
  • 个税两种申报方式哪种好
  • 待抵扣税金凭证分录
  • 先分后合是什么意思
  • 广告策划费会计分录
  • 以前年度损益调整借贷方向
  • 车购税申报表如何作废重开
  • 预提土地使用税的分录
  • 非公司汽车加油怎么开票
  • 正常的成本利润是多少
  • 应纳税额计算举例
  • 本年度应收账款是否应该加起初
  • 考勤扣款是税前还是税后
  • 建筑增值税抵扣怎么算
  • 房地产开发经营属于什么行业类别
  • 发票涉税风险有哪些
  • 大中小微企业划分标准2023年
  • 发放股票股利后的未分配利润怎么算
  • 在产品的成本
  • 企业购入存货分录
  • 差额发票如何缴纳增值税
  • 税后利润是净利润还是利润总额
  • 计提社保公司承担部分怎么算
  • 华为手机记事本app
  • vue中的...
  • 企业收到的罚款收入属于什么科目
  • 退货需要进行的操作
  • 国有土地出让收入分析报告
  • 企业票据贴现费怎么算
  • 前端框架view
  • 转租会计如何记账
  • 野生动物huan
  • 图像质量评价指标及方法 图像工程
  • 发生的计提费用没有发生怎么办
  • 苏尼亚尼
  • 分公司?
  • 【AIGC】6、Segment Anything | Meta 推出超强悍可分割一切的模型 SAM
  • 怎么写产品成本分析
  • vue从0创建一个项目
  • nvm for windows
  • 账载折旧金额填哪个数
  • 销售方开具的红字信息表
  • 非财政补助结余分配和非财政拨款结余分配
  • 无发生额有没有对账单
  • asp连接sqlserver数据库的三种方式是什么?
  • mysql清空缓存
  • 费用票有什么用处
  • 营业收入计入销售收入吗
  • 为什么应付账款不被视为债务融资
  • 公司收到注册资本金需要做哪些呢
  • 预缴了增值税在申报增值税时申报
  • 缴纳增值税的会计处理方法
  • 中小企业所得税优惠
  • 税控服务费如何入账
  • 税率与征收率是怎么回事
  • 上期留抵税额可以留多久
  • 应税劳务会计分录
  • 个人账户发工资扣税吗
  • 人力成本工资总额指应发工资
  • sql server数据库中的null(空值)
  • mysql单表10亿
  • win7系统管理在哪
  • win7电脑一键关机快捷键
  • 怎么检测u盘是否扩容
  • pull current
  • linux读取命令
  • new folder.exe是什么
  • win7 esd安装文件怎么安装教程
  • win10系统经典桌面
  • opengl 生成图片
  • 为什么要建立文明城市
  • dos命令chkdsk
  • ie8兼容性模式设置在哪
  • jquery1
  • Windows下python2.7.8安装图文教程
  • 印花税在哪里查询
  • 增值税即征即退申报表怎么填
  • 黄金消费税如何算
  • 广东电子税务局官网登录入口手机版
  • 临汾的公司需要交社保吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设