微信小程序 自动解决分包大小问题_一个小小的优化，能让你的小程序瘦身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比较简单，因此我就自己上手写了一个：

实践

通过上述我写的parser，写了一个简单的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，感谢！