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

本文主要是介绍uniapp发布到微信小程序：分包、删减代码全过程，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

0. 前言

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

1. 分包

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

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

注意：

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

推荐使用 unicloud云服务空间主页，云服务空间有10G免费容量。
将资源上传到云服务空间，然后点击详情可以看到url~

附一张uniapp官方教程里关于阿里云服务空间的描述~ 阿里等云服务

3. 删除多余组件

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

• 先在微信开发者工具查看代码依赖情况
  
  （上图有点夸张哈，是没把图片改成url的版本~）

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

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

• 然后就是删除多余组件（uniapp打包成微信小程序，好像会自动剔除用不到的组件，所以这里需要有针对性的删组件）

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

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

  不能发视频相关：
  不能发音乐相关：
  体验版：
  

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里注册一下：
  

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

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

这篇关于uniapp发布到微信小程序：分包、删减代码全过程的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！