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

stark张宇2023-09-25 10:24

概述

在昨天的工作中遇到了一个微信小程序上传代码过大的情况，在这里总结一下具体的解决步骤，首先介绍一下，技术栈是使用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，问题得以解决。