注册
web

uni-app小程序超过2M怎么办?

一、开发版


开发版可以调整上限为4M


开发者工具 -> 详情 -> 本地设置 -> 预览及真机调试时主包、分包体积上限调整为4M -> 勾选


二、体验版、正式版


上传代码时,主包必须在2M以内。


小程序tabbar页面必须放在主包。


推荐除了tabbar页面以外,其余的都放在分包。其实只要这样做了,再复杂的小程序,主包代码都很难超过2M,但如果是uni-app开发的,那就不一定了。


uni-app优化


开发环境压缩代码


使用cli创建的项目


package.jsonscript中设置压缩:在命令中加入--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


image.png


总结


重要的事情说三遍



  • 不要在uni.scss文件内写公共css代码
  • 不要在uni.scss文件内写公共css代码
  • 不要在uni.scss文件内写公共css代码

作者:xintianyou
来源:juejin.cn/post/7411334549739733018

0 个评论

要回复文章请先登录注册