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

  • 网络cup是什么意思(cup是啥意思呀)

    网络cup是什么意思(cup是啥意思呀)

  • 华为nova5有耳返功能吗(华为nova怎么开启耳返)

    华为nova5有耳返功能吗(华为nova怎么开启耳返)

  • 抖音赞了再撤回对方知道吗(抖音点赞又撤回,楼主能看到吗)

    抖音赞了再撤回对方知道吗(抖音点赞又撤回,楼主能看到吗)

  • ipadair3容易弯吗(ipad air3容易变弯吗)

    ipadair3容易弯吗(ipad air3容易变弯吗)

  • 小米手环5什么上市时间(小米手环5什么时候充电比较好)

    小米手环5什么上市时间(小米手环5什么时候充电比较好)

  • 麒麟810是几纳米(麒麟810是几纳米工艺制程)

    麒麟810是几纳米(麒麟810是几纳米工艺制程)

  • 5g优享服务是什么意思(5g优享网络服务是什么)

    5g优享服务是什么意思(5g优享网络服务是什么)

  • 手机左上角hd要钱吗(手机左上角显示hd是否要钱?)

    手机左上角hd要钱吗(手机左上角显示hd是否要钱?)

  • 钉钉直播可以关声音吗(钉钉直播可以关闭摄像头吗)

    钉钉直播可以关声音吗(钉钉直播可以关闭摄像头吗)

  • 苹果最近通话显示多少条(苹果最近通话显示多少个)

    苹果最近通话显示多少条(苹果最近通话显示多少个)

  • iphone11长多少厘米(iphone 11长多少)

    iphone11长多少厘米(iphone 11长多少)

  • 微信收钱怎么没有提示(微信收钱怎么没有)

    微信收钱怎么没有提示(微信收钱怎么没有)

  • 钉钉一个手机可以使用两个账号吗(钉钉一个手机可以下载两个吗)

    钉钉一个手机可以使用两个账号吗(钉钉一个手机可以下载两个吗)

  • 正在准备自动修复要等多久(正在准备自动修复然后黑屏)

    正在准备自动修复要等多久(正在准备自动修复然后黑屏)

  • 钉钉电脑最小化计入时长吗(钉钉电脑最小化算时长吗)

    钉钉电脑最小化计入时长吗(钉钉电脑最小化算时长吗)

  • 话筒将什么信号转化为什么信号(话筒把什么信号转化为)

    话筒将什么信号转化为什么信号(话筒把什么信号转化为)

  • 四核四线程是什么意思(四核四线程的好吗)

    四核四线程是什么意思(四核四线程的好吗)

  • iphone11几号发售(iphone11什么时间发售)

    iphone11几号发售(iphone11什么时间发售)

  • 承载系统lte打开收费吗(承载系统lte打开会提高网速吗)

    承载系统lte打开收费吗(承载系统lte打开会提高网速吗)

  • ipad2越来越慢怎么办(ipad2变得很慢)

    ipad2越来越慢怎么办(ipad2变得很慢)

  • 手机假电量怎么解决(手机假电量怎么恢复代码)

    手机假电量怎么解决(手机假电量怎么恢复代码)

  • iphone怎么显示百分比(苹果怎么显示百分比)

    iphone怎么显示百分比(苹果怎么显示百分比)

  • 键盘上end键的作用(键盘end键是哪个)

    键盘上end键的作用(键盘end键是哪个)

  • 如何把合并的pdf分开(如何把合并的pdf变得一样大)

    如何把合并的pdf分开(如何把合并的pdf变得一样大)

  • 触屏校准在哪里(荣耀V20触屏校准在哪里)

    触屏校准在哪里(荣耀V20触屏校准在哪里)

  • vivox9s水印相机怎么设置(vivox60水印)

    vivox9s水印相机怎么设置(vivox60水印)

  • word怎么标注引用(word怎么标注引用的句子)

    word怎么标注引用(word怎么标注引用的句子)

  • 小规模纳税人开专票税率是1%还是3%
  • 期末留抵税额是怎么产生的
  • 税后经营净利率什么意思
  • 集团内部两个公司业务可以互相外包吗
  • 企业自产的产品转为自用
  • 先开票后跨月预缴税款可以吗
  • 金税四期影响企业贷款吗
  • 会计信息采集每年都要采集吗
  • 产品质量问题赔偿账务处理
  • 核定征收需要什么条件
  • 资产处置收益对应科目
  • 权益法核算的好处
  • 固定资产报废的会计科目
  • 未及时扣除的分数怎么算
  • 小规模纳税人标准2019
  • 融资租入固定资产属于资产吗
  • 没收租赁保证金开什么内容的发票
  • 佣金付给别人公司违法吗
  • 经营租赁不动产发票备注栏
  • 周转借款会计分录
  • 公司是否可以开电子发票
  • 专票怎么提交不上去
  • 2018增值税暂行条例
  • 税局定额的标准
  • 关于商业健康保险产品的规范和条件
  • 营改增一般纳税人申请过渡性财政扶持资金
  • 债权投资属于其他非流动金融资产嘛
  • 税控技术服务费需要交印花税吗
  • 计提个人保险会计分录
  • 个人独资企业取得的股息红利
  • 更正或作废申报怎么填
  • flash设置旋转
  • 暂估收入入账冲回如何会计分录
  • 企业办理银行结汇流程
  • php中split
  • 骑自行车的好处功效与作用
  • uniapp示例
  • windows server 2016 配置web网页
  • php autoloader
  • 2021最好的固态
  • 药品生产企业应建立
  • laravel创建项目
  • yolov5 ios
  • 在双方发生纠纷时品牌授权书的法律意义
  • 企业清算分配的财产金额怎么算出来
  • 注册公司时的注册资金
  • php实现自动识别的方法
  • 【JavaScript 刨根问底之】requestAnimationFrame以及延时器
  • vue :data="data"
  • python爬虫入门教程
  • 记载资金的账簿
  • 汇算清缴交税怎么做账务处理
  • 一般纳税人增值税税率
  • 企业分配股权
  • 公司注销其他应收款怎么冲平
  • 一次性用品可以做什么东西
  • 小微企业财政政策
  • 委托银行贷款利息发票谁提供
  • 购入固定资产入账会计凭证怎么做
  • 季度所得税申报怎么弥补以前年度亏损
  • 企业报税表格填写
  • 工程施工的主要经济指标包括哪些
  • 金税盘减免税款分录
  • 公司五金是哪五金
  • 税控盘交服务费
  • 建账的基本步骤
  • centos下安装jdk
  • ubuntu14.04安装ssh服务
  • win7鼠标右键菜单选项太多怎么删除
  • unity获取mesh网格数据
  • 深入react技术栈
  • 实现高性能化 两个字表达
  • iredmail是免费的吗
  • 层盖住下拉列表框问题解决方案
  • jquery easyui插件
  • python函数判断质数
  • 蚊香税率是多少
  • 累计计税金额是怎么得出
  • 深圳机打发票查询
  • 金水区地税局办事大厅
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设