正文
小程序代码包压缩 策略&方案
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
微信小程序自推出以来，逐渐发展，目前正受到越来越多的青睐。其中很重要的一点得益于小程序的轻量级特性，每个小程序最多不超过2MB，招之即来挥之即去，相比于几十上百兆的APP，用户进入小程序，或者说，小程序获取新用户，的成本大大降低。
但与之相应的，是开发资源的限制。由于轻量级特性，小程序的代码包体积、可用内存空间、可用存储空间等均受限制。如何在有效支持业务逻辑的同时，尽量减少资源占用，在小程序开发环境中显得尤为重要。代码包体积是其中的一个重要方面，本文将就此进行分析与探讨。
背景
本文内容基于小程序“转转官方”经验总结，部分内容与开发环境密切相关，因而此处进行简要介绍。
“转转官方”是一个重量型小程序，移植了转转APP的绝大部分功能，从商品发布、浏览、搜索、下单、跟进等交易逻辑，到留言、私信、红包、推荐、运营活动、个人中心、圈子社区等扩展能力均已支持，目前代码包体积约为1.5MB。
“转转官方”采用wepy框架进行开发。该框架类似vue，支持组件化开发、ES678语法、less语法等，源码经编译、压缩后才生成实际代码。目前线上使用版本为1.5.8。框架介绍：像VUE一样写微信小程序-深入研究wepy框架
意义
控制代码包大小主要意义：
- 避开大小限制
小程序代码包体积存在大小限制，一开始为1MB，后来改为2MB，代码包体积超过此上限时将无法进行预览/上传/发布。 - 降低用户获取成本
减小代码包体积，可以降低小程序下载时长&首次加载时长，降低新用户流失率；同时减少下载流量和本地空间占用，提升用户体验。 - 开发维护
保持代码包干净整洁，一定程度上有利于代码的长期维护。
策略
控制代码包大小主要策略：
- 搬
能搬的尽量搬。图片、音频、数据、甚至页面，很多都可以搬至服务端，需要时再通过网络载入。将非核心非必要的内容移出代码包可以大幅度释放代码包空间。 - 删
搬不了的尽量删。已下线、已废弃、无关、冗余等不需要/不再需要的内容应及时清理，避免持续占用代码包空间。 - 压缩
删不了的尽量压缩。图片、js、wxss、wxml等均存在压缩空间。很多时候，适当程度的压缩，能在几乎不影响功能体验的同时，有效减少空间占用。 - 合并
压缩不了的尽量合并。功能类似的资源可以归一化，在需求/设计/实现层面减少资源的重复消耗。 - 其它
其它压缩策略。
方案资源外置
非核心不紧急的资源文件，特别是图片、音频、视频等体积较大的媒体文件，可以移至cdn服务器，需要时再通过网络载入。
这常常是小程序前期膨胀的主要原因和最有效压缩方式，比如我们的“手机30秒快卖”小程序，将图片资源移出代码包后，体积从约2MB直接降到了195KB。
数据外置
非核心不紧急的数据内容，包括城市地区等大段数据，标签映射等大段配置，使用条约、服务说明等大段文案，可以移至数据服务器或本地storage，需要时再予以载入。
有些内容体积会比想象中大，比如我们的“转转使用条约”，移出代码包后，释放了约40KB空间。
功能外置
非核心自定义属性不强烈、不紧急可以异步处理的功能，可以移至外部实现。如选择地址、查看大图等功能可以交由小程序原生接口实现，编码解码等功能可以交由服务端实现。
页面外置
非核心不紧急的页面，可以考虑移至服务端。从基础库1.6.4起，小程序开始支持内嵌网页，非核心页面可以考虑适当往web服务器迁移。
[wepy] 清理残留文件
目前wepy编译时不会自动清理上次编译残留的文件，导致历史资源持续积累。
e.g. 7个页面,npm run build, 172KB -> 删掉6个页面, npm run build, 依然 172KB。
因而应当修改build脚本，在编译前增加清空dist步骤，或在编译前手动删除dist目录。
清理无关文件
应避免代码包中混入运行无关的文件，如readme、doc、demo、测试用例等。
可以通过设计合理的文件结构避免无关文件混入代码目录，wepy框架下也可以配置.wepyignore自动按类型/目录过滤文件（项目目录-新建.wepyignore文件-编辑-语法参考.gitignore）。
清理已下线/已弃用文件
已下线/已弃用的文件资源应及时清理，包括npm包、组件、页面、媒体资源等。若后续需要重新上线/重新使用，可以通过git等版本控制工具找回。这部分资源不需要持续占用代码包空间。
IDE的查看引用、范围搜索等功能可以为清理过程提供一定的便利。
资源都移至cdn之后，这部分空间可能就是最可观的了。“转转官方”小程序代码包体积从2MB出头降到了约1.5MB，主要就是由清理残留文件、清理已下线/已弃用文件释放的。
[wepy]清理多余wxml文件
目前wepy编译时会将组件的dom部分拼合到页面中，而不生成单独的wxml文件。
但若组件所在文件路径不含'/components/'，则编译环节wepy不会识别其为组件，会按'Other'类型处理，从而生成多余的wxml文件和json文件。
确保组件都放在components目录下可以避免这部分多余空间消耗。
清理大文件
大文件常常存在较大的压缩空间，值得重点排查和处理。
查找大文件tip：资源管理器 - 代码目录 - 搜索'*' - 右键 - 排序方式：大小，即可将代码包内所有文件按大小排序展示
资源压缩
大部分资源都可以进行适当压缩，常常可以在保证功能体验的同时，有效地减少空间占用。参考工具：
- js压缩: 配置wepy-plugin-uglifyjs插件
- json、wxml压缩： 配置wepy-plugin-filemin插件
- less压缩： 配置wepy-compiler-less插件
- 图片压缩： 配置wepy-plugin-imagemin插件、TinyPNG
其中TinyPNG工具压缩效果非常可观，400KB的图片压到40KB不足为奇，并且画质感知上几乎无损。
资源合并
功能类似的资源可以归一化，减少重复空间占用。
- 需求层面，比如不同运营活动可以采用统一模板，而不每次增加单独页面等；
- 样式层面，比如可以统一弹窗规范，而不引入五花八门的零碎弹窗组件等；
- 设计开发层面，比如可以尽量解耦合抽取公共组件，减少重复造轮子等。
[wepy]清理组件DOM冗余拷贝？
观察发现，目前wepy的组件实现中，编译后页面对组件js、wxss的引用是通过require、@import的形式实现的，而对组件dom的引用则是直接拼合到页面wxml文件中。
这导致，当一个组件被多处引用时，其dom内容会有多份冗余拷贝。
e.g. 10个页面引用了组件A => 编译出的10个页面wxml各含一份A的dom，A的template部分在代码包中被原模原样重复了10次
如果修改wepy编译过程，将组件dom引用过程改为使用include或原生组件（基础库1.6.3开始支持）实现，应当可以节省这部分冗余开销。
[wepy]压缩自动生成的代码量？
观察发现，代码包中除了手动维护的业务代码之外，也有不少框架/插件自动生成的代码。如源码编译过程中生成的辅助代码、兼容ES678语法引入的垫片代码、兼容各运行环境引入的css前缀代码等。
通过对框架和插件进行修改/配置，应当可以一定程度减少这部分空间开销。比如对babel插件进行规则配置、对auto-prefix插件进行最低版本配置，应当可以牺牲部分不必要的兼容性，从而减少垫片代码的生成量等。诸如此类。
只是笔者未及尝试，尚不确定这部分开销是否有可观的压缩空间。
压缩额外文件空间？
观察发现，代码包大小总是比代码内容总大小大得多（上传后详情面板中“上次上传”、“上次预览”总是比“本地代码”大得多）。
这部分额外大小应当也是存在压缩空间的。比如将细碎图片、细碎js文件、细碎less文件拼合成雪碧图、js库、less库等较大文件，应当可以减少由于文件最小存储单元引入的额外空间开销等。诸如此类。
只是笔者未及尝试，尚不确定这部分开销是否有可观的压缩空间。
总结
资源外置
非核心不紧急的资源文件，特别是图片、音频、视频等体积较大的媒体文件，可以移至cdn服务器，需要时再通过网络载入。
这常常是小程序前期膨胀的主要原因和最有效压缩方式，比如我们的“手机30秒快卖”小程序，将图片资源移出代码包后，体积从约2MB直接降到了195KB。
数据外置
非核心不紧急的数据内容，包括城市地区等大段数据，标签映射等大段配置，使用条约、服务说明等大段文案，可以移至数据服务器或本地storage，需要时再予以载入。
有些内容体积会比想象中大，比如我们的“转转使用条约”，移出代码包后，释放了约40KB空间。
功能外置
非核心自定义属性不强烈、不紧急可以异步处理的功能，可以移至外部实现。如选择地址、查看大图等功能可以交由小程序原生接口实现，编码解码等功能可以交由服务端实现。
页面外置
非核心不紧急的页面，可以考虑移至服务端。从基础库1.6.4起，小程序开始支持内嵌网页，非核心页面可以考虑适当往web服务器迁移。
[wepy] 清理残留文件
目前wepy编译时不会自动清理上次编译残留的文件，导致历史资源持续积累。
e.g. 7个页面,npm run build, 172KB -> 删掉6个页面, npm run build, 依然 172KB。
因而应当修改build脚本，在编译前增加清空dist步骤，或在编译前手动删除dist目录。
清理无关文件
应避免代码包中混入运行无关的文件，如readme、doc、demo、测试用例等。
可以通过设计合理的文件结构避免无关文件混入代码目录，wepy框架下也可以配置.wepyignore自动按类型/目录过滤文件（项目目录-新建.wepyignore文件-编辑-语法参考.gitignore）。
清理已下线/已弃用文件
已下线/已弃用的文件资源应及时清理，包括npm包、组件、页面、媒体资源等。若后续需要重新上线/重新使用，可以通过git等版本控制工具找回。这部分资源不需要持续占用代码包空间。
IDE的查看引用、范围搜索等功能可以为清理过程提供一定的便利。
资源都移至cdn之后，这部分空间可能就是最可观的了。“转转官方”小程序代码包体积从2MB出头降到了约1.5MB，主要就是由清理残留文件、清理已下线/已弃用文件释放的。
[wepy]清理多余wxml文件
目前wepy编译时会将组件的dom部分拼合到页面中，而不生成单独的wxml文件。
但若组件所在文件路径不含'/components/'，则编译环节wepy不会识别其为组件，会按'Other'类型处理，从而生成多余的wxml文件和json文件。
确保组件都放在components目录下可以避免这部分多余空间消耗。
清理大文件
大文件常常存在较大的压缩空间，值得重点排查和处理。
查找大文件tip：资源管理器 - 代码目录 - 搜索'*' - 右键 - 排序方式：大小，即可将代码包内所有文件按大小排序展示
资源压缩
大部分资源都可以进行适当压缩，常常可以在保证功能体验的同时，有效地减少空间占用。参考工具：
- js压缩: 配置wepy-plugin-uglifyjs插件
- json、wxml压缩： 配置wepy-plugin-filemin插件
- less压缩： 配置wepy-compiler-less插件
- 图片压缩： 配置wepy-plugin-imagemin插件、TinyPNG
其中TinyPNG工具压缩效果非常可观，400KB的图片压到40KB不足为奇，并且画质感知上几乎无损。
资源合并
功能类似的资源可以归一化，减少重复空间占用。
- 需求层面，比如不同运营活动可以采用统一模板，而不每次增加单独页面等；
- 样式层面，比如可以统一弹窗规范，而不引入五花八门的零碎弹窗组件等；
- 设计开发层面，比如可以尽量解耦合抽取公共组件，减少重复造轮子等。
[wepy]清理组件DOM冗余拷贝？
观察发现，目前wepy的组件实现中，编译后页面对组件js、wxss的引用是通过require、@import的形式实现的，而对组件dom的引用则是直接拼合到页面wxml文件中。
这导致，当一个组件被多处引用时，其dom内容会有多份冗余拷贝。
e.g. 10个页面引用了组件A => 编译出的10个页面wxml各含一份A的dom，A的template部分在代码包中被原模原样重复了10次
如果修改wepy编译过程，将组件dom引用过程改为使用include或原生组件（基础库1.6.3开始支持）实现，应当可以节省这部分冗余开销。
[wepy]压缩自动生成的代码量？
观察发现，代码包中除了手动维护的业务代码之外，也有不少框架/插件自动生成的代码。如源码编译过程中生成的辅助代码、兼容ES678语法引入的垫片代码、兼容各运行环境引入的css前缀代码等。
通过对框架和插件进行修改/配置，应当可以一定程度减少这部分空间开销。比如对babel插件进行规则配置、对auto-prefix插件进行最低版本配置，应当可以牺牲部分不必要的兼容性，从而减少垫片代码的生成量等。诸如此类。
只是笔者未及尝试，尚不确定这部分开销是否有可观的压缩空间。
压缩额外文件空间？
观察发现，代码包大小总是比代码内容总大小大得多（上传后详情面板中“上次上传”、“上次预览”总是比“本地代码”大得多）。
这部分额外大小应当也是存在压缩空间的。比如将细碎图片、细碎js文件、细碎less文件拼合成雪碧图、js库、less库等较大文件，应当可以减少由于文件最小存储单元引入的额外空间开销等。诸如此类。
只是笔者未及尝试，尚不确定这部分开销是否有可观的压缩空间。
由于轻量级特性，小程序开发环境中，对代码包体积的控制是十分必要且十分有意义的。
本文介绍了代码包体积压缩的一些策略、方案和几个未及实践的思路。总的来说，就是尽量精简，尽量只将最核心最必要最紧急的内容放在代码包内。其它资源过多占用代码包空间时，则考虑通过搬移/删除/压缩/合并等方式予以释放。
拙劣之处欢迎不吝赐教。
如果你喜欢我们的文章，关注我们的公众号和我们互动吧。
小程序代码包压缩 策略&方案的更多相关文章- 如何减小微信小程序代码包大小
原作于:https://captnotes.com/how_to_reduce_package_size_of_weapp 这两天被小程序代码包大小暴涨的问题困扰了挺久.简单说说怎么回事吧,就是之前好 ...
- 微信小程序代码构成
一.小程序代码 app.json 是当前小程序的全局配置,包括了小程序的所有页面路径.界面表现.网络超时时间.底部tab等. { "pages":[ "pages/ind ...
- 微信小程序编译包的获取与解压——在手机中获取小程序编译包wxapkg
准备工作: 微信关注需要下载编译包的小程序,然后点进去看一下,微信就会自动下载相应的编译包到手机上了. 获取小程序编译包: 据说root手机可以直接在手机的文件管理中查找wxapkg文件,自己尝试了下 ...
- 微信小程序代码片段
微信小程序代码片段是一种可分享的小项目,可用于分享小程序和小游戏的开发经验.展示组件和 API 的使用.复现开发问题等等.分享代码片段会得到一个链接,所有拥有此分享链接的人可以在工具中导入此代码片段. ...
- 福利贴——爬取美女图片的Java爬虫小程序代码
自己做的一个Java爬虫小程序 废话不多说.先上图. 目录命名是用标签缩写,假设大家看得不顺眼能够等完成下载后手动改一下,比方像有强迫症的我一样... 这是挂了一个晚上下载的总大小,只是还有非常多由于 ...
- [RN] React Native代码转换成微信小程序代码的转换引擎工具
React Native代码转换成微信小程序代码的转换引擎工具 https://github.com/areslabs/alita
- 微信小程序转百度小程序代码
听说百度小程序开始出现手机端搜索流量,作为SEO一员,必须搞他.但是又奈何之前做的都是微信小程序,所以用php写了一个微信小程序转百度小程序代码. 修改文件后缀名 .wxml转换为.swan .wxs ...
- 开发指南~小程序代码构成~JSON配置
2.1 JSON 配置 JSON 是一种数据格式,并不是编程语言,在小程序中,JSON扮演的静态配置的角色. 2.1.1 一个例子 先看一个例子,打开开发工具的编辑器,在根目录下可以找到 app.j ...
- 微信小程序 - gulp插件压缩（代码、图片等）
最后更新时间: 2018.7.18 :更新了所有package.json插件版本以及修复极个别问题. 2018.8.12 : 增加提示,所有标签必须闭合(不然打包会报错) 2018.10.13:需要用 ...
随机推荐- 个人对B/S项目的一些理解（一）
以下是我自工作以来,结合对C/S项目的认知,对B/S项目的一些理解. 如有不足或者错误,请各位指正. B/S browser/server ----对于这两个软件的个人看法 本质上,也是两个软 ...
- Windows服务的手动添加和删除方法
Windows服务的手动添加和删除方法 服务,是指执行指定系统功能的程序.例程或进程,以便支持其他程序,尤其是低层(接近硬件)程序.其实,服务就是一种特殊的应用程序,它从服务启动开始就一直处于运行状态 ...
- 【BZOJ】3709: [PA2014]Bohater（贪心）
http://www.lydsy.com/JudgeOnline/problem.php?id=3709 很水的题...但是由于脑洞小..漏想了一种情况.. 首先显然能补血的先杀.. 然后杀完后从补血 ...
- Studio-----快捷键大全
Ctrl+Alt+Space 类名或接口名提示; 补充布局的提示: 26. Ctrl+Alt+Space是类名自动完成 Ctrl+X 删除行 Ctrl+D 复制行 Alt+回车 导入包,自动修正 Cr ...
- iOS中navigationItem的titleView如何居中
开发过程中,发现titleview很难居中,通过各种尝试终于找到了解决方法. 首先清楚你个概念: leftBarButtonItem,导航条中左侧button. rightBarButtonItem, ...
- Mac各种数据库安装和启动【笔记】
MongoBD 一个基于分布式文件存储的数据库. 下载 https://www.mongodb.com/download-center#community 安装 解压包 mongodb 数据默认存在/ ...
- The path is not a valid path to the xxx kernel header
在安装vmtools时无意中出现了这样的问题 1.gcc错误 Searching for GCC- The path "" is not valid path to the gcc ...
- Django 2.0 学习(12)：Django 模板语法
Django 模板语法 一.模板 只要是在html里面有模板语法就不是html文件了,这样的文件就叫做模板. 二.模板语法 模板语法变量:{{ }} 在Django模板中遍历复杂数据结构的关键是句点字 ...
- netcore的Session使用小记
之前说过,core需要什么功能就添加并使用什么中间件 照例,在Startup.cs的ConfigureServices方法中添加services.AddSession();再在Configure方法中 ...
- 进程同步——哲学家进餐问题Java实现
哲学家就餐问题是1965年由Dijkstra提出的一种线程同步的问题. 问题描述:一圆桌前坐着5位哲学家,两个人中间有一只筷子,桌子中央有面条.哲学家思考问题,当饿了的时候拿起左右两只筷子吃饭,必须拿 ...
原作于:https://captnotes.com/how_to_reduce_package_size_of_weapp 这两天被小程序代码包大小暴涨的问题困扰了挺久.简单说说怎么回事吧,就是之前好 ...
一.小程序代码 app.json 是当前小程序的全局配置,包括了小程序的所有页面路径.界面表现.网络超时时间.底部tab等. { "pages":[ "pages/ind ...
准备工作: 微信关注需要下载编译包的小程序,然后点进去看一下,微信就会自动下载相应的编译包到手机上了. 获取小程序编译包: 据说root手机可以直接在手机的文件管理中查找wxapkg文件,自己尝试了下 ...
微信小程序代码片段是一种可分享的小项目,可用于分享小程序和小游戏的开发经验.展示组件和 API 的使用.复现开发问题等等.分享代码片段会得到一个链接,所有拥有此分享链接的人可以在工具中导入此代码片段. ...
自己做的一个Java爬虫小程序 废话不多说.先上图. 目录命名是用标签缩写,假设大家看得不顺眼能够等完成下载后手动改一下,比方像有强迫症的我一样... 这是挂了一个晚上下载的总大小,只是还有非常多由于 ...
React Native代码转换成微信小程序代码的转换引擎工具 https://github.com/areslabs/alita
听说百度小程序开始出现手机端搜索流量,作为SEO一员,必须搞他.但是又奈何之前做的都是微信小程序,所以用php写了一个微信小程序转百度小程序代码. 修改文件后缀名 .wxml转换为.swan .wxs ...
2.1 JSON 配置 JSON 是一种数据格式,并不是编程语言,在小程序中,JSON扮演的静态配置的角色. 2.1.1 一个例子 先看一个例子,打开开发工具的编辑器,在根目录下可以找到 app.j ...
最后更新时间: 2018.7.18 :更新了所有package.json插件版本以及修复极个别问题. 2018.8.12 : 增加提示,所有标签必须闭合(不然打包会报错) 2018.10.13:需要用 ...
- 个人对B/S项目的一些理解（一）
以下是我自工作以来,结合对C/S项目的认知,对B/S项目的一些理解. 如有不足或者错误,请各位指正. B/S browser/server ----对于这两个软件的个人看法 本质上,也是两个软 ...
- Windows服务的手动添加和删除方法
Windows服务的手动添加和删除方法 服务,是指执行指定系统功能的程序.例程或进程,以便支持其他程序,尤其是低层(接近硬件)程序.其实,服务就是一种特殊的应用程序,它从服务启动开始就一直处于运行状态 ...
- 【BZOJ】3709: [PA2014]Bohater（贪心）
http://www.lydsy.com/JudgeOnline/problem.php?id=3709 很水的题...但是由于脑洞小..漏想了一种情况.. 首先显然能补血的先杀.. 然后杀完后从补血 ...
- Studio-----快捷键大全
Ctrl+Alt+Space 类名或接口名提示; 补充布局的提示: 26. Ctrl+Alt+Space是类名自动完成 Ctrl+X 删除行 Ctrl+D 复制行 Alt+回车 导入包,自动修正 Cr ...
- iOS中navigationItem的titleView如何居中
开发过程中,发现titleview很难居中,通过各种尝试终于找到了解决方法. 首先清楚你个概念: leftBarButtonItem,导航条中左侧button. rightBarButtonItem, ...
- Mac各种数据库安装和启动【笔记】
MongoBD 一个基于分布式文件存储的数据库. 下载 https://www.mongodb.com/download-center#community 安装 解压包 mongodb 数据默认存在/ ...
- The path is not a valid path to the xxx kernel header
在安装vmtools时无意中出现了这样的问题 1.gcc错误 Searching for GCC- The path "" is not valid path to the gcc ...
- Django 2.0 学习(12)：Django 模板语法
Django 模板语法 一.模板 只要是在html里面有模板语法就不是html文件了,这样的文件就叫做模板. 二.模板语法 模板语法变量:{{ }} 在Django模板中遍历复杂数据结构的关键是句点字 ...
- netcore的Session使用小记
之前说过,core需要什么功能就添加并使用什么中间件 照例,在Startup.cs的ConfigureServices方法中添加services.AddSession();再在Configure方法中 ...
- 进程同步——哲学家进餐问题Java实现
哲学家就餐问题是1965年由Dijkstra提出的一种线程同步的问题. 问题描述:一圆桌前坐着5位哲学家,两个人中间有一只筷子,桌子中央有面条.哲学家思考问题,当饿了的时候拿起左右两只筷子吃饭,必须拿 ...
