uniapp发布到微信小程序:分包、删减代码全过程

0. 前言

  • 五人经过几天的努力,形成了三份代码 (疯狂暗示:有代码冗余风险)
  • 我经过一天半的努力,合并成一份代码20m的代码 (很明显冗余了… 因为其实功能并不多 /滑稽)
  • 准备发布到微信小程序上。。。 (理想很美好。。。)
  • 于是乎,有了这个缩减代码的奋斗史。。。
  • 微信开发者工具对发布小程序有大小限制,不分包肯定是发不了了,于是重新合并代码(过程尽量减少组件的引入),然后开始分包。。。
  • 重点:代码:基于uni-starter模板,引入uview-ui组件,echarts地图,登录注册

1. 分包

在内容较多的时候,需要分包,当然如果只是图片等资源比较多,而实际的内容不是很多的话,可以直接跳到步骤2
分包官方教程:uniapp分包:subPackages
如果分完包,还是超出限制,可以在微信开发者工具查看代码依赖情况,并继续往下看博文~

2. 静态资源使用url形式引入(可放在云服务空间)

注意:

  • tabbar的icon不能使用url
  • 部分主包的资源不能使用url加载

推荐使用 unicloud云服务空间主页,云服务空间有10G免费容量。
将资源上传到云服务空间,然后点击详情可以看到url~
uniapp发布到微信小程序:分包、删减代码全过程
附一张uniapp官方教程里关于阿里云服务空间的描述~ 阿里等云服务
uniapp发布到微信小程序:分包、删减代码全过程

3. 删除多余组件

如果此时还是超出限制,那就要有针对性地删除组件了。。。

  • 先在微信开发者工具查看代码依赖情况
    uniapp发布到微信小程序:分包、删减代码全过程
    (上图有点夸张哈,是没把图片改成url的版本~)

  • 可以只分析主包,但是建议其它包也删减一下~

  • 如果发现有些比较大的文件,是小程序端用不到的,那可以直接删了

  • 然后就是删除多余组件(uniapp打包成微信小程序,好像会自动剔除用不到的组件,所以这里需要有针对性的删组件) uniapp发布到微信小程序:分包、删减代码全过程

  • 仅参考)其实我刚开始的策略是,全局搜索组件名—uni_modules的组件名可以在每个组件的readme看到,
    uniapp发布到微信小程序:分包、删减代码全过程
    如果没有被其它vue代码引用,并且没有被其它组件引用(changelog.md和readme.md都不算) 依赖也不算,都不是真正用到这个组件(依赖需要把这行删掉,如图)
    uniapp发布到微信小程序:分包、删减代码全过程
    此处就会遇到一个问题,假如一个底层组件A(文件较大,例如uni_row)并没有用到,但是被封装后的B用到了,实际上B也用不到,这时全局搜索A(根据代码依赖)的时候,发现B里有A,不敢删A。。。其实如果先全局搜索B,发现B没有被引用,删掉B,再全局搜索A,A也没有被引用,就可以都删掉了。。。(所以,还是要一点点删代码才知道具体的依赖情况;或者一层一层的搜,搜A,发现只有B依赖,继续搜B,如果没依赖皆大欢喜直接删,如果有…继续… 经个人测试,如果全局搜到5或6个文件相关时,比较安全,大概率可以删除

  • 划重点!!! 如果你即将上传的代码包含视频和音频,那很不幸的告诉你,微信小程序的个人开发者不允许发布视频、音频内容。。。可以直接把相关组件和代码删了。。。当然如果想一直用测试版(不需要审核),当我没说~

    不能发视频相关:uniapp发布到微信小程序:分包、删减代码全过程
    不能发音乐相关:uniapp发布到微信小程序:分包、删减代码全过程
    体验版:
    uniapp发布到微信小程序:分包、删减代码全过程

4. 调整布局

经过上述操作,如果发现缩到2M还是很困难,可以选择调整布局,把四个tabber改成三个。。。改前:好悲桑不想改嘤嘤嘤。。。改后:啊~真香
调整布局后,就可以把一整个tabber的内容移到分包里~

5. 删除冗余代码

emm如果现在,你的主包还是超过2M,那可能需要改动代码了。。。(慎重慎重慎重!当然如果评论区有其它方法,bz收到后会及时更新哒~)

  • 删除非微信小程序的条件编译:例如:< !-- #ifdef APP-PLUS || H5 --> 但是不要删 ifndef ! 详情可参考:uni-app中的#ifdef #ifndef #endif的用处,可以处理兼容多端平台
    (不过效果不是很好,适合一个.vue中,一上来就条件编译,针对不同平台写了n套代码的情况—>不常见)
  • 在删除组件(我这里是删uview_ui)的时候,components文件夹下的组件删的只剩几个,但是lib文件夹很大,里面有多余的css样式…css样式很占空间的呀… 于是开始了手删css… (注:这里有个前提,我预先知道,uview_ui只有一部分代码用得到–>代码是我合并的,非常清楚…) 如果真的到这一步了,那一定要删一下,运行一下,检查一下…

6. 结束

走到这一步,bz的主包已经从3989K降到2085K啦!把一个背景图,直接换成简易的css样式,就大功告成啦! 不知道小伙伴有没有这么幸运哈哈哈哈~

7.尾声

  • hbuilderx创建的项目,好像不能通过npm压缩代码并发布,bz是直接运行到微信开发者工具然后点击“上传”的,(点击发行只能在unpackage文件夹下生成一个微信小程序的文件,,,这个文件微信开发者工具打不开,,, 不够微信开发者工具点击上传的时候,貌似可以压缩代码)

  • (小白可参考)移动uni_modules里的组件到分包M,M里有一个vue文件要引用这个组件,如果代码不改,发现引用失败,此时:在script里import一下,然后再components里注册一下:
    uniapp发布到微信小程序:分包、删减代码全过程

  • 再强调一下:如果是个人开发者而不是企业开发者,是不运行发布视频和音频的!!! bz不敢骂 ,只能劝解小伙伴们多注意~

  • 小伙伴们如果有更好的删减demo的方法,欢迎评论区评论呀~

上一篇:UNIAPP字符base64解析


下一篇:PAT甲级——A1011 World Cup Betting