微信小程序:uniapp解决上传小程序体积过大的问题

概述

在昨天的工作中遇到了一个微信小程序上传代码过大的情况,在这里总结一下具体的解决步骤,首先介绍一下,技术栈是使用uniapp框架+HBuilderX的开发环境。

错误提示

真机调试,提示包提交过大,不能正常生成二维码,后续上传代码更是不可能了,减少包中的体积顺着这条思路去解决问题。

1.静态图片资源改变成网络请求的方式

我们使用的初衷是,把图片加载在static本地,缓存在本地,以便提升更快的响应速度,第一步剥离大的图片更换成网络请求,顺着编辑器提示去处理。

2.对小程序进行分包

小程序主包最大可以加载到1.5M,加载所有的依赖和插件不能大于2M,小程序中有个解决办法是对小程序进行分包处理,使每个包保持在2M的大小,主包和分包之间直接进行跳转,分包和分包不能跳转。

json 复制代码
"optimization" : {
    "subPackages" : true
},

进行了拆包还是没有解决问题,分包的作用主要运行的是代码,也就是说代码要尽量的小,多了需要进行分解。

3.压缩vendor.js

昨天真正的定位问题是vendor.js 1.88M ,小程序开发代码工具-详情-代码依赖分析中查看,解决vendor.js才是根本的解决之道。

使用HBuilderX打包上传来解决问题,HBuilderX -> 发行 -> 小程序(微信),操作的过程失败了一次,是因为需要注意的是需要绑定开发者后台的地方,开发管理->开发设置->小程序代码上传下载小程序代码上传密钥和绑定IP白名单,这个需要管理员同意。

最后包的体积从12.88M压缩到了4.16M,问题得以解决。

相关推荐
qq_316837754 小时前
阿里云百炼 fun-asr-realtime uniapp vue3 调用
javascript·vue.js·uni-app
m0_462803885 小时前
会议签到里,手写签名怎样从“额外动作“变成流程环节
微信小程序
醒目8011 小时前
从图像到拼豆图纸:像素化生成与色板匹配技术实践
微信小程序
特创数字科技11 小时前
uniapp 图片全能处理|全平台支持(鸿蒙、安卓、苹果、web),实现九宫格、水印、滤镜、压缩、拼图
uni-app
2501_9160074712 小时前
苹果应用商店App Store上架费用标准及原因解析
android·ios·小程序·https·uni-app·iphone·webview
00后程序员张1 天前
苹果App Store上架指南:费用、原理与步骤详解
android·ios·小程序·https·uni-app·iphone·webview
特创数字科技2 天前
【uni-app x】告别系统相机限制!三端通用自定义相机组件:任意布局、静默拍照、录像、水印叠加、连拍回图一次搞定
前端·数码相机·uni-app
Martin -Tang2 天前
uniapp app嵌套webview 弹窗方式
android·ios·uni-app
愚公搬代码2 天前
【愚公系列】《微信小程序项目实战(AI编程+视频图解)》002-一张新地图:AI创业的核心分析框架
人工智能·微信小程序·ai编程
ZeroNews内网穿透2 天前
企业内网穿透别再用随机域名!自有域名实现 OA/ERP 公网安全访问
微信小程序·内网穿透·erp·zeronews·运维实战·企业oa·自有域名