位置: IT常识 - 正文

vite 本地运行首次进入页面加载慢问题(本地运行库是什么)

编辑:rootadmin
vite 本地运行首次进入页面加载慢问题 思考

推荐整理分享vite 本地运行首次进入页面加载慢问题(本地运行库是什么),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:本地运行库是什么,本地运行库是什么,运行本地策略,vite本地代理配置,本地运行库是什么,运行本地用户和组,本地运行什么意思,本地运行什么意思,内容如对您有帮助,希望把文章链接给更多的朋友!

vite的适用场景是什么? 由于我使用了tailwindcss插件 使用webpack 每次启动所有的项目的css样式都预先使用tailwindcss 转换成css 性能普通的电脑启动项目需要1分钟到2分钟。不过首次加载不会有什么多大的延迟,按需导入的页面加载也不会有多大的延迟,但webpack下运行的tailwindcss有个问题就是修改样式后动态编译运行后 查看样式很卡 长时间修改样式 很吃内存 运行久了就会挤爆内存。 现在vue3很流行使用vite打包,所以我也尝试使用vite。webpack 切换到vite,如果单看命令行中的运行,运行完毕不到一秒,不过首次打开页面则需要等10秒到20秒左右的处理时间 请求数量达到了132个(浏览器对于这种并发请求会产生阻塞的),这里的文件最大了也是tailwindcss,并且打开按需加载的页面路由时,还需要经过tailwindcss编译css,打开未打开过的页面还需等几秒时间,这个体验非常差。

vite 本地运行首次进入页面加载慢问题(本地运行库是什么)

vite 预打包

由于vite需要动态解析依赖,然后再打包。原理 参考vite 依赖预构建。所以首次打开页面 解析 打包会很慢,因为vite 默认依赖构建 达不到预期 官方提供了依赖优化选项 让开发者实现添加依赖项 optimizeDeps.exclude或者排除依赖项 optimizeDeps.include 这里我们使用 optimizeDeps.include添加依赖项。

添加依赖项

通常一些常见的依赖项如vue axios vue-router我们都可以知道可以添加到依赖项。但是一些样式 js文件的依赖项我们无法准确的得知。这里使用第三方插件vite-plugin-optimize-persist 来实现获取依赖项 参考 文章 vite首次打开界面加载慢问题/解决 安装 插件

npm i -D vite-plugin-optimize-persist vite-plugin-package-config

vite.config.ts添加配置 其中 include里面就是需要添加的依赖项

// 自动生成 预打包import OptimizationPersist from "vite-plugin-optimize-persist";import PkgConfig from "vite-plugin-package-config";export default ({ mode }) => { plugins: [ vue(), //自动生成 预打包 PkgConfig(), OptimizationPersist(), AutoImport({ resolvers: [ElementPlusResolver()], }), Components({ resolvers: [ElementPlusResolver()], }), ], optimizeDeps: { include: [ "element-plus/es", "element-plus/es/components/config-provider/style/css", "element-plus/es/components/container/style/css", "element-plus/es/components/main/style/css", "element-plus/es/components/header/style/css", "element-plus/es/components/date-picker/style/css", "element-plus/es/components/drawer/style/css", "element-plus/es/components/image/style/css", "element-plus/es/components/image/style/css", "element-plus/es/components/table/style/css", "element-plus/es/components/table-column/style/css", "element-plus/es/components/input/style/css", "element-plus/es/components/dropdown/style/css", "element-plus/es/components/popover/style/css", "element-plus/es/components/dropdown-item/style/css", "element-plus/es/components/dropdown-menu/style/css", "element-plus/es/components/pagination/style/css", "element-plus/es/components/scrollbar/style/css", "element-plus/es/components/dialog/style/css", "element-plus/es/components/loading/style/css", "element-plus/es/components/tabs/style/css", "element-plus/es/components/tab-pane/style/css", "element-plus/es/components/select/style/css", "element-plus/es/components/option/style/css", "vue", "pinia", "jquery", "sass", "vue-router", // "tailwindcss", "tailwindcss/plugin", ], },}

原本插件应该是在 package.json 中自动生成 类似于 “vite”: { “optimizeDeps”: { “include”: [ // managed by vite-plugin-optimize-persist “@material-ui/core/Accordion”, “@material-ui/core/AccordionSummary”, “@material-ui/core/Dialog”, “@material-ui/core/DialogActions”, “@material-ui/icons/Dehaze”, “date-fns/format”, “lodash/debounce”, “lodash/map” ] } } 的依赖项的 。但是我打开页面发现package.json未自动生成依赖项。 所以我手动在vite.config.ts 添加依赖项 首次打开页面时,当’‘include’'中的数组不包含该依赖项时 命令行会提示出来 添加进去即可。 // 依赖项命令行提示 添加依赖项后 命令行运行完毕慢几百毫秒 但是按需加载页面的加载速度可以得到提升

本文链接地址:https://www.jiuchutong.com/zhishi/285109.html 转载请保留说明!

上一篇:fgadmin.exe是什么进程 有什么作用 fgadmin进程查询(gnaupdaemon.exe是什么)

下一篇:橡皮树怎么养(橡皮树怎么养护)

  • win11自动关机设置在哪(win11自动关机设置不了)

    win11自动关机设置在哪(win11自动关机设置不了)

  • 尼康d5600怎么传照片到手机(尼康d5600怎么传照片)

    尼康d5600怎么传照片到手机(尼康d5600怎么传照片)

  • 华为音乐如何卸载(华为音乐如何卸掉)

    华为音乐如何卸载(华为音乐如何卸掉)

  • 华为nova5可以用两张电信卡吗(华为nova5可以用66w快充吗)

    华为nova5可以用两张电信卡吗(华为nova5可以用66w快充吗)

  • 京东评价为啥不能复制粘贴(京东评价为啥不见了)

    京东评价为啥不能复制粘贴(京东评价为啥不见了)

  • openld为空怎么处理(openid为空用户自己能解决吗)

    openld为空怎么处理(openid为空用户自己能解决吗)

  • 4ghd怎么关闭(4ghd怎么关闭vivo手机)

    4ghd怎么关闭(4ghd怎么关闭vivo手机)

  • 怎么设置qq消息不显示内容(怎么设置QQ消息提醒)

    怎么设置qq消息不显示内容(怎么设置QQ消息提醒)

  • 苹果腾讯会议没有共享屏幕(苹果腾讯会议没有声音)

    苹果腾讯会议没有共享屏幕(苹果腾讯会议没有声音)

  • miui12系统什么时候更新(miui12.5什么时间)

    miui12系统什么时候更新(miui12.5什么时间)

  • 微信卸载后了聊天记录还在吗(微信卸载后聊天记录不见了怎么恢复)

    微信卸载后了聊天记录还在吗(微信卸载后聊天记录不见了怎么恢复)

  • qq动态权限设置三天(如何修改qq动态权限设置)

    qq动态权限设置三天(如何修改qq动态权限设置)

  • 手机安装未知权限在哪(手机安装未知权限怎么设置)

    手机安装未知权限在哪(手机安装未知权限怎么设置)

  • 拼多多直通车晚上要不要关掉(拼多多直通车晚上可以调低一点吗?)

    拼多多直通车晚上要不要关掉(拼多多直通车晚上可以调低一点吗?)

  • 苹果11一直转圈圈怎么办(苹果11一直转圈不开机也不关机)

    苹果11一直转圈圈怎么办(苹果11一直转圈不开机也不关机)

  • 淘宝可以申请几次换货(淘宝可以申请几次价保)

    淘宝可以申请几次换货(淘宝可以申请几次价保)

  • word怎么计算平均值(word怎么计算平均得分)

    word怎么计算平均值(word怎么计算平均得分)

  • 华为恢复删除通话记录(如何恢复被删除的通话记录华为)

    华为恢复删除通话记录(如何恢复被删除的通话记录华为)

  • 魅族16T怎么打开USB调试(魅族16s怎么使用)

    魅族16T怎么打开USB调试(魅族16s怎么使用)

  • 小米手机内容中心怎么关闭(小米手机内容中心在哪里)

    小米手机内容中心怎么关闭(小米手机内容中心在哪里)

  • 坚果pro2和pro2s区别(坚果pro2与2s外形一样吗)

    坚果pro2和pro2s区别(坚果pro2与2s外形一样吗)

  • qq空间怎么屏蔽黄钻官方团队(qq空间怎么屏蔽不是好友的人)

    qq空间怎么屏蔽黄钻官方团队(qq空间怎么屏蔽不是好友的人)

  • pr怎么删除原视频音频(pr怎么删除原视频的背景音乐)

    pr怎么删除原视频音频(pr怎么删除原视频的背景音乐)

  • 微信设置消息免打扰对方知道吗(微信设置消息免打扰还能收到消息吗)

    微信设置消息免打扰对方知道吗(微信设置消息免打扰还能收到消息吗)

  • 芒果二维码在哪能找到(芒果二维码在哪里)

    芒果二维码在哪能找到(芒果二维码在哪里)

  • 微信发送不了语音(微信发送不了语音是什么原因)

    微信发送不了语音(微信发送不了语音是什么原因)

  • 在win10中,为什么电脑时间不能同步?(win10为什么毛病这么多)

    在win10中,为什么电脑时间不能同步?(win10为什么毛病这么多)

  • css关于文本溢出(css单行文本溢出隐藏)

    css关于文本溢出(css单行文本溢出隐藏)

  • 山东省增值税发票查验平台
  • 小规模超过30万计算
  • 税负税负率与税率区别?
  • 防伪税控系统专用设备
  • 财务报表审计的标准
  • 合营企业和联营企业的持股比例
  • 股东借钱给公司,公司经营不善倒闭!借款公司要还不
  • 增值税应税销售额包括哪些
  • 自然灾害造成的房屋损失怎么处理
  • 无票收入申报时要填税率吗
  • 应收留抵税额退税款科目是资产类
  • 分公司亏损总公司账务处理
  • 坏账确认无法收回的会计分录
  • 怎么调整应收账款账龄
  • 以现金形式发工资的说明范文
  • 公司按揭购车可以抵扣税吗
  • 外贸企业出口退税出口明细申报表
  • 现金流量表借款还了流入和流出可以抵消吗
  • 通用机打发票操作流程
  • 保安公司开具的发票
  • 建筑业营改增账务处理怎么做?
  • 开专票一定要公章吗
  • 企业销售货物因违规处罚
  • 资源税改革对政治的影响
  • 自然灾害造成的存货净损失计入什么科目
  • 普通发票跨月能入账吗
  • 二手车过户员怎么样
  • win7原版系统安装后没有任何驱动
  • 公司从一个帐户里扣税吗
  • 企业投资的工程项目包括
  • 发票已认证还未开票
  • smtplib教程
  • 企业长期借款的利息,有可能计入的科目有( )
  • fbembed.dll
  • 银行存款利息是按月结还是按年
  • 小程序常见问题
  • php设置图片将图片居中
  • 图像相似性度量
  • 大数据找工作好找吗
  • 文化事业建设费计入什么科目
  • 出售子公司股权不丧失控制权
  • 哪些公司不交五险一金
  • mongodb介绍
  • 领取材料的分录
  • 增值税专用发票几个点
  • 个人代工程发票要缴纳的个税
  • 印花税的税率变动
  • 坏账准备的应提数
  • 土地摊销计入成本还是费用
  • 收到证券公司信息
  • 小微企业全年营业额不能超过多少
  • 小规模纳税人销售不动产适用税率
  • 现金解款单是什么
  • 辞退福利的会计分录怎么写
  • 低值易耗品属于资产类账户吗
  • 预计负债是暂时性差异还是永久性差异
  • 会计分录的记账要素
  • 公司委托银行付款的账务处理
  • 存货账面价值的确定
  • 租赁费计提部分算入印花税吗
  • 小规模公司购买汽车如何抵税
  • 未分配利润借方是什么意思
  • 利息税额计算公式
  • win8.1还原系统
  • 如何查看ubuntu系统的版本
  • mac开机声音怎么取消
  • 微软将为11增加AI助手
  • 怎么放大linux字体
  • python挑战
  • unet遥感图像分割
  • vue前端后端
  • texture packer工具
  • javascript总结笔记
  • js querySelector() 使用方法
  • hadoop有几个版本
  • 如何用nodejs搭建服务端
  • 动态加载原理
  • unity脚本调用
  • 残疾人个人所得税减免政策2023
  • 税控软件怎么升级到新版本
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设