微信小程序依靠微信巨大的用户流量优势,吸引来了众多第三方开发者。几乎每个公司都会想通过小程序拉到新的用户群体。3月份接到公司任务,需要将公司各业务线小程序整合到一个小程序中。但摆在面前的问题是空间完全不够。当时微信小程序的使用空间是 1024KB(现在已升为 2M),各个业务线独立的小程序都不小,『机票火车票汽车票』小程序更是超过 900KB。如何整合和压缩才能使 size 达标,成了最大的挑战。
我们经过考虑,准备从两个方面进行整合和压缩,一是通过工程化的方式实现代码复用——提取公共业务逻辑,公共组件;二是通过工具进行自定义化代码打包压缩处理。
工程规范制定
为了节省开发时间,我们尽量整合现有业务线小程序代码,减少业务改动。
目录结构
同时为了后期计算各业务占用空间情况方便,我们直接将各业务线小程序工程代码拷贝到各自业务线目录下,最终的目录结构如下:
.
├── common # 通用模块/公共业务
├── home # 首页
├── flight # 机票
├── train # 火车票
├── bus # 汽车票
├── hotel # 酒店
└── ticket # 门票
common 模块即工程的复用部分,具体业务代码都在各自目录下。总体架构如下:
公共组件、API
微信小程序其实并没有提供组件化开发的方式。只是提供了 template
的方式,所以我们只提供了为数不多的页面及组件,例如:城市定位、日历组件等。但是收益却是非常明显的,像这些页面大小都在 20KB~30KB,如果每个业务自己整一套可能将徒增上百 KB 代码。
公共 API 我们提供了统一的 Watcher
监控、 Requester
请求、 Loading
加载转态、 Navigation
导航等。这些公共逻辑的抽取,为整个项目整合节省了巨大的空间,使 size 达标看起来不那么难了。
工程复用上节省了很大一部分空间。但是空间是有限的,业务需求是无限的。而且,size 的大小会影响用户加载的速度,包括下载最新版本代码的速度和小程序初始化的速度,所以还需要进一步进行代码压缩。