json移除一个元素_一个小小的优化,能让你的小程序瘦身10%

96355eaefc1bff1b47cbfdc15a01975d.png
我司一直专注于微信小程序(以下简称小程序)开发,可以说是重仓押注在小程序上。但由于小程序的大小有严格的限制(单个分包/主包大小不能超过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比较简单,因此我就自己上手写了一个:

LeeJim/wxml-parser​github.com
5456c15685704b6ba08897c73a6c41ef.png

实践

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

wxml-minifier​github.com

安装

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,感谢!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值