概述
在前几天的工作中又遇到了一个微信小程序上传代码过大的情况,在这里总结一下具体的解决步骤,说明我们需要进一步的优化它,技术栈是使用uniapp框架+HBuilderX的开发环境,微信小程序更新了隐私协议,Http返回信息{errMsg: "getUserProfile:fail can only be invoked by user TAP gesture."}
定位原因
程序出现问题,首先需要把原因定位归结在第一点,这是解决问题的关键,检查了一下Git仓库的修改情况,发现引入了一个7kb大小的防抖插件,其实7kb的插件不是根本问题,问题是之前的代码写的太不规范了。
压缩资源
尽量把static下面的图片都压缩一下,这里推荐一个好用的压缩网站,图片进行压缩:tinypng.com/
我没有压缩过Js文件,但会有一种方法压缩js文件,使js文件尽量的缩小来减少js文件建立的文件体积。
uniapp官方压缩建议:
小程序工具提示vendor.js过大,已经跳过es6向es5转换。这个转换问题本身不用理会,因为vendor.js已经是es5的了。
关于体积控制,参考如下:
- 使用运行时代码压缩 HBuilderX创建的项目勾选运行-->运行到小程序模拟器-->运行时是否压缩代码
- cli创建的项目可以在package.json中添加参数--minimize,示例:"dev:mp-weixin": "cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch --minimize"
小程序分包处理
- 在对应平台的配置下添加
"optimization":{"subPackages":true}
开启分包优化 - 目前只支持
mp-weixin、mp-qq、mp-baidu、mp-toutiao、mp-kuaishou
的分包优化
分包优化具体逻辑:
- 静态文件:分包下支持 static 等静态资源拷贝,即分包目录内放置的静态资源不会被打包到主包中,也不可在主包中使用
- js文件:当某个 js 仅被一个分包引用时,该 js 会被打包到该分包内,否则仍打到主包(即被主包引用,或被超过 1 个分包引用)
- 自定义组件:若某个自定义组件仅被一个分包引用时,且未放入到分包内,编译时会输出提示信息
分包内静态文件示例
json
"subPackages": [{
"root": "pages/sub",
"pages": [{
"path": "index/index"
}]
}]
网络请求
还有一个解决小程序体积过大的问题,把非必要的组件都使用Http Api接口的形式去进行交互,尽量去减少本地包中的体积,再根目录下/utils里有一个232kb的获取地址交互,可以替换成Http Api的形式来解决。
隐私协议
在开发微信小程序过程中遇到了{errMsg: "getUserProfile:fail can only be invoked by user TAP gesture."}
,出现这个信息的原因是微信平台更新了隐私协议,需要再后台备案更新一下,搜索了很多,都不准确,这个隐私协议没有什么特殊情况,2个小时就可以通过了。
设置路径1: 公众号平台->设置->服务内容声明
,设置通过后显示的状态是已更新
,状态之前的是审核中
设置路径2: 首页->管理->版本管理->提交审核
,再这里面提审,隐私协议审核过了,就可以继续开发了。