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

  • 公众号怎么样起好文章标题?(公众号怎么样起号)

    公众号怎么样起好文章标题?(公众号怎么样起号)

  • 畅享10plus支持隐私空间吗(畅享10 plus隐藏属性)

    畅享10plus支持隐私空间吗(畅享10 plus隐藏属性)

  • 抖音封号还能恢复吗(抖音封号了还能解封吗?)

    抖音封号还能恢复吗(抖音封号了还能解封吗?)

  • WPSoffice如何插入一列

    WPSoffice如何插入一列

  • 苹果11pro支持指纹解锁吗(11pro支持指纹么)

    苹果11pro支持指纹解锁吗(11pro支持指纹么)

  • 微信专清里的文件可以清理吗(微信专清里的文件没用过怎么会有)

    微信专清里的文件可以清理吗(微信专清里的文件没用过怎么会有)

  • 苹果手机直播屏幕变暗怎么回事(苹果手机直播屏幕)

    苹果手机直播屏幕变暗怎么回事(苹果手机直播屏幕)

  • ipad air2支持pencil吗(ipad air2支持pencil 2磁吸充电吗)

    ipad air2支持pencil吗(ipad air2支持pencil 2磁吸充电吗)

  • 剪映app怎样剪切视频画面的一部分(剪映 如何剪切)

    剪映app怎样剪切视频画面的一部分(剪映 如何剪切)

  • 华为nova5pro微信怎么分身(华为nova5pro微信指纹支付不能用)

    华为nova5pro微信怎么分身(华为nova5pro微信指纹支付不能用)

  • 华为手机媒体声音突然变小是怎么回事(华为手机媒体声音突然没有声音了该怎么办)

    华为手机媒体声音突然变小是怎么回事(华为手机媒体声音突然没有声音了该怎么办)

  • vivo手机可以投屏吗(vivo手机可以投屏到苹果平板上吗)

    vivo手机可以投屏吗(vivo手机可以投屏到苹果平板上吗)

  • 502 bad gateway手机怎么解决(502 Bad Gateway手机浏览器)

    502 bad gateway手机怎么解决(502 Bad Gateway手机浏览器)

  • 怎么查看微信登录痕迹(怎么查看微信登录设备)

    怎么查看微信登录痕迹(怎么查看微信登录设备)

  • 国产苹果x是什么基带(苹果x是中国产的还是美国产的)

    国产苹果x是什么基带(苹果x是中国产的还是美国产的)

  • 语音电话怎么打(微信语音电话怎么打)

    语音电话怎么打(微信语音电话怎么打)

  • word页码全是1怎么连续(word2016页码都是1)

    word页码全是1怎么连续(word2016页码都是1)

  • word一个页面显示两页(word文档在一页显示)

    word一个页面显示两页(word文档在一页显示)

  • 手机tf卡怎么用(华为手机tf卡怎么用)

    手机tf卡怎么用(华为手机tf卡怎么用)

  • oppo怎么安装小爱同学(oppo怎么安装小黄鸟证书)

    oppo怎么安装小爱同学(oppo怎么安装小黄鸟证书)

  • 苹果8p和xsmax的区别

    苹果8p和xsmax的区别

  • 网站只让看10分钟视频怎么办(网页就可以看的网站)

    网站只让看10分钟视频怎么办(网页就可以看的网站)

  • 华为nova闪退怎么解决(nova8闪退)

    华为nova闪退怎么解决(nova8闪退)

  • 学信网最初密码是什么(学信网最初密码怎么查)

    学信网最初密码是什么(学信网最初密码怎么查)

  • 华为手机怎么矩形截屏(华为手机怎么矩阵截图)

    华为手机怎么矩形截屏(华为手机怎么矩阵截图)

  • 华为duallens啥型号(duallens是华为什么型号asph)

    华为duallens啥型号(duallens是华为什么型号asph)

  • 荣耀7x能开空调吗(荣耀7可以遥控空调吗)

    荣耀7x能开空调吗(荣耀7可以遥控空调吗)

  • 手机太烫怎么降温(手机太烫怎么降温?)

    手机太烫怎么降温(手机太烫怎么降温?)

  • 不借助第三方软件管理启动项(不是第三方的贷款app)

    不借助第三方软件管理启动项(不是第三方的贷款app)

  • 如何隐藏WordPress主题或插件的更新提示(如何隐藏应用软件华为)

    如何隐藏WordPress主题或插件的更新提示(如何隐藏应用软件华为)

  • 基于法律行为的物权变动三要件
  • 所得税申报资产不允许为0?
  • 劳务分包和劳务外包
  • 技术服务公司可以卖材料吗
  • 会计准则哪些科目变化最大
  • 房屋租赁后转租合法吗
  • 支付开票税款计入什么科目
  • 员工报销增值税
  • 长期待摊费用的摊销方法
  • 结转预交增值税会计处理
  • 出口抵减内销产品应纳税额年终结转
  • 当期发生的费用
  • 公司承揽员工租房个税如何入账?
  • 非独立核算分公司怎么报税
  • 开劳务分包发票需要什么条件?
  • 外购固定资产进项税
  • 图书发票票样
  • 为什么应收和预收在一起
  • 先开票还是先预约
  • 公司租车交税
  • 计提折旧计算公式是什么
  • 固定资产双倍余额递减法计提折旧公式
  • 如何使用腾讯电子签维护自己的权益
  • redis在php项目中的使用实例
  • 如何使用腾讯电子签
  • 华为鸿蒙系统支持苹果手表吗
  • 物资销售经营范围
  • pax是什么文件
  • 港田路凤凰城
  • 建筑业2021年享受核定征收吗
  • 以公允价值计量的金融资产不计提损失准备
  • 全网首发是什么意思
  • javascript - localStorage 本地存储(新增、删除、修改)使用教程
  • ubuntu搭建web服务器流程
  • laravel中间件是什么意思
  • joinby命令
  • 建筑装饰工程公司属于什么行业
  • 发票管理人员如何操作
  • Postgresql ALTER语句常用操作小结
  • 帝国cms灵动标签调用外表
  • 坏账准备在资产负债表哪里体现
  • 小规模纳税人有几种税率
  • 火车票可以抵扣进项吗
  • 接受母公司捐赠现金分录
  • 银行存款日记账填写样本图
  • 租来的厂房如何交税
  • 什么情况下说免贵
  • 怎样单方面注销手机卡
  • 利息支出和利息收入区别
  • 在长期股权投资中,如何理解控制、重大影响?
  • sql分页查询怎么实现
  • win7经典版怎么换回win10
  • win7系统桌面图标不见了右键无反应
  • win7系统环境变量无法编辑怎么办
  • 联想e430安装win10
  • windowsxp收藏夹在哪
  • centos防火墙操作
  • 怎么自己安装windows7
  • xp系统如何更改开机启动项
  • windows中的hosts文件
  • linux免安装软件
  • android开发环境配置
  • 移动端一般用什么布局
  • Node.js中的包管理工具是什么
  • android studio环境
  • windows的安装类型
  • android录音软件
  • python函数经典例程
  • jQuery Mobile和HTML5开发App推广注册页
  • js中scrollHeight,scrollWidth,scrollLeft,scrolltop等差别介绍
  • unity mathf.sin
  • python多线程爬虫代码
  • 医保所属期起和所属期止
  • 股权转让是实缴资本吗
  • 社保逾期未申报会造成什么影响,要怎么处理
  • 贵阳北控水务电话客服电话
  • 国家税务总局的官网
  • 购车发票包含
  • 房地产开发企业资质管理规定
  • 2021年福建医保什么时候交
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设