微信小程序代码压缩及存储方案,怎么把30+功能整合到一个小程序

OK,下面就简单聊下我这个工具小程序的代码及存储方式吧，没有服务器、不想云开发的朋友可以看下，几乎无成本的小程序存储方案。

一、关于图片资源的解决办法

一般来说如果你有图床或云存储的就直接在小程序里面使用url地址进行引用了（这也是微信推荐的做法），我做的时候是使用Emoji图标+ 本地图片资源组合着用。

1、合理使用Emoji

Emoji是一种图像符号占用就几个文字的大小但是显示出来却是类似图片的效果（在不同系统、终端手机下表现会不一样），而且现在AI也很喜欢用它，导致看到这种图像符号就会有点AI味。

2、注意纯图片资源的大小

越是精美、高质量的图片占用的空间就越大，甚至一张图片的大小就超过了2M完全没有写代码的空间了，所以图片尺寸尽量小，不能小的话就用一些在线的图片压缩工具进行压缩。我这个工具小程序主要的图片是工具icon，这个icon图片尺寸小一点不影响观感。另外我是直接让AI使用python给我绘制的工具图标，好处是细节少显得简约且占用空间也不到（基本每个工具图标大小不超1kb）

3、使用微信小程序的文件系统存储使用产生的图片等资源

小程序自带运行时存储空间，这个空间只能在你程序使用过程中读写（是发布小程序项目后运行时才能利用起来，所以这个不能存放代码等项目文件），一般用来存储使用小程序过程中产生的数据、图片资源等，比如我小程序里"每日菜谱"应用，添加菜谱图片等上传后其实就是存到小程序文件系统的本地用户文件中并不是上传服务器，用户文件中的图片等资源可以在小程序页面引用并渲染展示出来，总大小不能超过200M。

另外为了节省本地这200M的空间，在上传图片的时候使用了图片压缩（微信小程序提供的wx.compressImage支持图片压缩，IOS只支持压缩jpg图片），我的小程序里面也提供图片管理功能，方便存储不够的时候可以手动删除或更换小图。这200M的空间也可以用来存其他文件比如txt、json,如果小程序本地使用产生的数据比较多可以把json数据文件存放到这个文件系统路径下，要注意的是文件路径读写文件的速度会略低于小程序缓存storage中的数据（但storage存储上限是10M）

提示：在电脑上的开发者工具调试的时候，有时候会遇到在小程序里图片突然不能上传了会有报错，一般是电脑上的小程序开发者模拟器缓存文件夹满了，可以完全退出开发者工具后再重新打开，或者是你在开发者工具上手动清缓存也行。

二、处理代码及压缩

1、样式统一缩减冗余代码（效果有限）

在VibeCoding构建完小程序后，页面功能越多，重复的代码可能也随之增加，这时候可以尝试进行css样式统一及规范，比如按钮、布局可以有统一的样式然后在用到的地方进行引用，而不是每次、每个页面都单独写样式文件导致冗余代码增加且可能存在样式不统一的问题。在一些稍大的项目中还需要恰当地进行组件封装以便复用，这个节省的代码量更明显，如果不是企业项目一般也没必要这么做。PS:如果不是特别熟悉前端项目的原则上不建议采用这种方式来缩减代码体积。

2、压缩代码（效果明显）

主流的做法是在微信小程序开发者工具中配置代码压缩。勾选上传代码时自动压缩样式文件、脚本文件、wxml文件，这会把多余的换行、注释等进行压缩过滤极大的减少项目体积。

3、手动定位资源占用大户，准确优化代码文件

有时候明明感觉很省着用空间了但是代码包体积还能大，这时候你就需要继续用开发者工具的"代码依赖分析"来排查了。根据颜色块从大到小排查一遍，看看有没有优化的空间，如果是代码就看是否存在没有引用或使用的"死代码"；图片就看能不能进行压缩或重复可复用的；如果是引入了外部的js可以考虑有没有轻量化的实现，不要为了一个很小的功能引入"巨大"的js文件。从下图可以看到我目前整个小程序1个主包3个分包含所有图片资源占用才1.57M。

4、尝试分包（避免主包体积超过2M）

一般来说最有效的办法是进行分包，我这个小程序是把几个相对独立的功能应用（本地记账、每日菜谱、医护记账）单独进行分包以便后续各自增加新功能。你也可以让AI阅读评估代码架构后给你推荐分包方案，没问题就可以让它替你分包完了你再好好测试就行。

三、小程序使用数据备份及还原

原本我小程序里的备份功能是计划把图片和数据打包成zip压缩包进行备份，但是后面只做了备份数据功能，图片需要在图片管理里面手动单独按张保存，具体什么原因记不清可能是要引入外部的jszip来实现就没让AI去做这个功能。

我做的备份是先通过fs.writeFile写备份文件json/txt数据文件，写成功后调用wx.shareFileMessage拉起分享，以便把文件发送给微信聊天用户（比如发给文件助手），并没有使用wx.saveFileToDisk保存到本地这种方案。

还原功能是使用wx.chooseMessageFile从微信聊天对话里面选择文件进行还原，相当于备份到聊天窗口还原也从聊天窗口选择闭环了。如果使用wx.chooseMessageFile这个接口可能会触发微信小程序隐私政策更新，提交代码发布时如果提示了更新隐私政策需要按指引更新填写用这个接口的原因（比如：从聊天中选择备份文件还原菜谱数据）。

最后附上我的工具小程序（30+离线工具可用），有需要的可以直接体验使用哦！