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

  • 更新显卡驱动有什么好处和坏处(更新显卡驱动有什么用)(更新显卡驱动有什么副作用)

    更新显卡驱动有什么好处和坏处(更新显卡驱动有什么用)(更新显卡驱动有什么副作用)

  • moo音乐是哪家公司的(moo音乐 知乎)

    moo音乐是哪家公司的(moo音乐 知乎)

  • 荣耀20pro拍照怎么设置(荣耀20pro拍照怎么显示时间地点)

    荣耀20pro拍照怎么设置(荣耀20pro拍照怎么显示时间地点)

  • ipad第六代可以用pencil吗(ipad第六代可以用电容笔吗)

    ipad第六代可以用pencil吗(ipad第六代可以用电容笔吗)

  • 电脑进水后可以正常使用有问题吗(电脑进水后可以正常使用)

    电脑进水后可以正常使用有问题吗(电脑进水后可以正常使用)

  • qq被暂时解冻没有显示时间(qq暂时被解冻能自己康复吗)

    qq被暂时解冻没有显示时间(qq暂时被解冻能自己康复吗)

  • 电脑网线接路由器还是光猫(电脑网线接路由器好还是光纤猫)

    电脑网线接路由器还是光猫(电脑网线接路由器好还是光纤猫)

  • 复制按键盘哪个键(复制按键盘哪个键电脑)

    复制按键盘哪个键(复制按键盘哪个键电脑)

  • 红米k30没有呼吸灯怎么提示通知(红米k30没有呼吸灯怎么办)

    红米k30没有呼吸灯怎么提示通知(红米k30没有呼吸灯怎么办)

  • 一个人能实名几个手机号码(一个人能实名几个QQ号)

    一个人能实名几个手机号码(一个人能实名几个QQ号)

  • b站实名认证怎么解除(b站实名认证怎么跳过拍照)

    b站实名认证怎么解除(b站实名认证怎么跳过拍照)

  • cmit id什么意思(cmllt id)

    cmit id什么意思(cmllt id)

  • 华为畅享6怎么分屏(华为畅享6怎么关闭锁屏密码)

    华为畅享6怎么分屏(华为畅享6怎么关闭锁屏密码)

  • 怎么关闭软件自动更新(怎么关闭软件自启动)

    怎么关闭软件自动更新(怎么关闭软件自启动)

  • OPPO k5怎么美颜自拍(oppok5怎么设置相机美颜)

    OPPO k5怎么美颜自拍(oppok5怎么设置相机美颜)

  • iqoopro5g啥时候上市(vivo iqoo pro 5g什么时候上市的)

    iqoopro5g啥时候上市(vivo iqoo pro 5g什么时候上市的)

  • 华为p9有没有nfc功能(华为p9有没有红外线遥控功能)

    华为p9有没有nfc功能(华为p9有没有红外线遥控功能)

  • iphone11pro双卡怎么放(iphone11pro双卡怎么设置网络)

    iphone11pro双卡怎么放(iphone11pro双卡怎么设置网络)

  • qq亲密关系可以绑几个(qq亲密关系可以看对方聊天记录吗)

    qq亲密关系可以绑几个(qq亲密关系可以看对方聊天记录吗)

  • 快手手机号换了要验证码怎么办(快手手机号换了怎么登)

    快手手机号换了要验证码怎么办(快手手机号换了怎么登)

  • 微信群怎么设置权限(微信群怎么设置人数500人)

    微信群怎么设置权限(微信群怎么设置人数500人)

  • 如何将照片文字转文档(如何将照片文字变清晰)

    如何将照片文字转文档(如何将照片文字变清晰)

  • win10卸载xbox有影响吗(xbox卸载没事吧)

    win10卸载xbox有影响吗(xbox卸载没事吧)

  • 畅享9s返回键在哪(畅享9s返回键在哪里设置)

    畅享9s返回键在哪(畅享9s返回键在哪里设置)

  • 图虫发布的怎么删除(图虫怎么上传图片)

    图虫发布的怎么删除(图虫怎么上传图片)

  • 数据类型转换(数据类型转换分为哪两种)

    数据类型转换(数据类型转换分为哪两种)

  • 高新技术生物企业是否可减按15%的税率纳税?
  • 股权转让主要交什么税
  • 董事会职权是否为强制规定
  • 理财产品分红和不分红的区别
  • 销售商品收到的银行本票
  • 工资 小数点
  • 跨年的费用怎么调整
  • 收回公司经营权需要做什么
  • 出口货物当期免抵退税不得免征和抵扣税额,应计入
  • 应收账款未收到回函的替代程序
  • 商品折扣促销方式的会计处理如何做?
  • 政府补贴装修费怎么算
  • 上个月银行流水没有录这个月补录
  • 来料加工企业的会计处理问题
  • 软件研发购买的测试用的设备应该怎么做账?
  • 货物运输政策
  • 个人所得税0申报操作流程
  • 什么叫金税四期呢?
  • 企业没交社保年限怎么算
  • 取得稳岗补贴后怎么办
  • 应付利息在资产负债表中属于什么项目
  • 适用增值税简易计税的项目
  • 红魔3和一加7pro哪个好
  • 如何备份计算机的注册表
  • php语法和常用的函数
  • 高新技术企业如何节税
  • php数组函数有哪些
  • 利用php实现开心麻花
  • 购入无形资产会计处理
  • 最保值的ipad
  • php实现数据批量导入
  • 拉姆绍在哪里
  • 二连浩特老照片
  • php代码报错
  • 阿尔卑斯山环保
  • 带有折扣的增值税怎么算
  • 委托代销商品委托方和受托方会计分录
  • 应交税款怎么计算
  • 个体工商户开普通发票需要交税吗
  • 进项税转出金额是发票上的哪个
  • 外管证异地预缴税款是什么意思
  • 公司记账可以不开发票吗
  • 织梦官方网站
  • 帝国cms8.0版
  • 企业资本包括
  • 原材料账户该如何做账
  • 有进项发票没有销项发票怎样做账
  • 出差会计处理
  • 暂时性差异的产生
  • 固定资产没有折旧完要转走会计科目
  • 存货过期处理怎么做分录
  • 认缴制下实收资本需要验资吗
  • 企业用支付宝
  • 代扣代缴附加税怎么做账
  • 单位注销合并劳动合同有效吗
  • 免增值税进项税怎么弄
  • 一般会计准则是什么
  • 买公司的钱计入什么科目
  • 工业企业存货发出计价的方法
  • mysql详细介绍
  • centos7.9命令
  • 如何下载苹果图书
  • linux自动化装机
  • linux文件切片命令
  • 第一启动项硬盘
  • windows的设置
  • win8defender怎么打开
  • 为什么要升级呀
  • regsvc32.exe - regsvc32是什么进程 有什么用
  • macos技巧
  • 实例讲解命局与大运流年作用
  • perl脚本foreach
  • android 自定义spinner
  • gimp批处理
  • node实现文件上传
  • 国税局调地方
  • 税务机关纳税检讨书范文
  • 税务上的关联企业指哪些
  • 商铺转让要交哪些税费和费用
  • 税票电话号码变更影响抵扣吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设