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

前言 ​

我司一直专注于微信小程序（以下简称小程序）开发，可以说是重仓押注在小程序上。\

但由于小程序的大小有严格的限制(单个分包/主包大小不能超过 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，感谢！