一个小小的优化,能让你的小程序瘦身10%

435

我司一直专注于微信小程序(以下简称小程序)开发,可以说是重仓押注在小程序上。
但由于小程序的大小有严格的限制(单个分包/主包大小不能超过2M)。
而我们的业务又相对比较复杂,因此常常会突破小程序的大小限制。因此,我们就不得不思考如何优化小程序的大小。

暴力方式

要优化小程序的大小,最好(最暴力)的方式就是删页面。

这样来,即高效执行起来也简单:统计下所有页面的PV、UV,将一些不活跃的页面移除就完事了。

但是,本文并不是要讲如何移除页面,因为这没什么好讲的。

分析

讲本文的优化方式之前,先分析一下小程序一般都由哪些文件组成的。

一般都是由以下几种文件组成:

  • .js 逻辑文件
  • .wxml 页面结构文件
  • .wxss 样式文件
  • .json 配置文件

也许你会将一些image放在小程序里,一般建议放较小且少量的image,其他都使用网络图片

其中,由于JavaScript有一定的兼容问题需要处理,因此在打包和上传小程序时,开发者工具会对JavaScript进行babel编译处理,故这块可优化的空间比较有限。

JSON的大小都比较小,且格式较为固定,也没什么可优化的地方。

接下来就是本文要重点说到的WXML了,一般WXSS都是和WXML配套使用的。这两者占小程序的大小比例也比较高,可优化空间非常大,可优化的思路也非常多。本文先讲一下WXML的一个优化技巧。

试验

其实,小程序最终的执行都是以WEB的形式完成的。因此WXML可以理解成类似于VUE的语法糖,最终都是要编译成HTML的。

所以,想要压缩WXML代码,就可以参考HTML的压缩方式。比如移除多余的空格。

我立马做了个试验,将WXML中的部分的空格移除之后,再使用开发者工具上传,发现小程序的大小真的发生了变化,变得更小了。因此可以得出结论,移除WXML中的空格是可行的压缩思路。

自动化

既然移除空格是可以减小小程序代码体积的,那么如何实现自动化移除的。

首先我想到的是,利用巨人的肩膀:htmlparser2。通过语法分析器,识别WXML的空格,并一举歼灭。

绝大多数情况下,这个做法是可行的。但是有一种情况,会导致parser识别出错:WXML中出现{{ }},且使用了<

因此需要特制一个识别WXML语法的parser

由于这样的parser比较简单,因此我就自己上手写了一个:wxml-parser

实践

通过上述我写的parser,写了一个简单的minifier:wxml-minifier

安装

npm i -D wxml-minifier

使用

let minifier = require('wxml-minifier')
let fs = require('fs')
let resource = fs.readSync('./app.wxml') // 假设输入为:<view class="home"    ></view>       <!-- test -->

let result = minifier(resource)
console.log(result) // <view class="home"></view>

总结

通过将WXML中多余的空格移除,可以将小程序的代码减小大概10%。

其实,从这个角度可以发现,开发者工具在上传WXML时,是没有做任何处理的。因此对于HTML的任何压缩方式都可以在WXML上使用。当然这也是后续我的wxml-parser持续更新迭代的方向。

不知道为什么微信官方在开发者工具上传代码时,不进行简单的简化处理。如果你有答案的话,欢迎在评论中给我回复!

如果觉得对你有用,希望给我一个star,感谢!