uni-app小程序超过2M怎么办?
一、开发版
开发版可以调整上限为4M
开发者工具 -> 详情 -> 本地设置 -> 预览及真机调试时主包、分包体积上限调整为4M -> 勾选
二、体验版、正式版
上传代码时,主包必须在2M以内。
小程序tabbar页面必须放在主包。
推荐除了tabbar页面以外,其余的都放在分包。其实只要这样做了,再复杂的小程序,主包代码都很难超过2M,但如果是uni-app开发的,那就不一定了。
uni-app优化
开发环境压缩代码
使用cli创建的项目
在package.json
,script
中设置压缩:在命令中加入--minimize
"dev:mp-weixin": "cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch --minimize",
使用hbuilderx创建的项目
顶部菜单栏点击运行 -> 运行到小程序模拟器 -> 运行时是否压缩代码 -> 勾选
开启压缩后,开发环境的小程序代码体积会大大降低
uni.scss优化
uni-app项目创建后会自带一个uni.scss
文件,这个文件无需手动引入,会自动引入到每一个页面文件,所以尽量不要在这个文件内写公共css代码。
我接手的一个uni-app小程序项目,随着功能迭代,打包代码主包体积越来越接近2M,终于有一天写完一个功能,突然就达到了2.2M,无法上传了。参考小程序提供的代码依赖分析,发现wxss
文件占用了大部分体积,于是我就去一个个搜,看某个class有没有被用到,没用到的就删掉,可是再怎么优化冗余代码,也无法降到2M以下。
直到我看到了uni.scss
文件,除了里面自带的一些颜色变量代码,另外还加了700行的公共class,然后我在根目录新建一个assets/common.scss
文件,把那700行代码移出去,在App.vue
内引入
@import './assets/common.scss'
主包体积瞬间降到了1.41M
总结
重要的事情说三遍
- 不要在uni.scss文件内写公共css代码
- 不要在uni.scss文件内写公共css代码
- 不要在uni.scss文件内写公共css代码
作者:xintianyou
来源:juejin.cn/post/7411334549739733018
来源:juejin.cn/post/7411334549739733018