wxml-minify

miniprogram wxml minify

Usage no npm install needed!

<script type="module">
  import wxmlMinify from 'https://cdn.skypack.dev/wxml-minify';
</script>

README

wxml-minify

压缩wxml，减小程序包大小。微信开发者工具只压缩了js, json, css, 实际wxml也可以进行压缩来减小包大小。

使用

$ yarn add wxml-minify -D

const minify = require('wxml-minify');

minify(`
<view class="{{a ? 'b' : 'c'}}">
  <!-- comment -->
  <view wx:if="{{a && b}}">hello</view>
  <view wx:else">world</view>
  <image class="d" id="e" lazy-load />
</view>
`)
// <view class="{{a?'b':'c'}}"><view wx:if="{{a&&b}}">hello</view>
// <view wx:else">world</view>
// <image class="d"id="e" lazy-load/></view>

原理

目前通过以下途径压缩，压缩率20%以上：

  1. 去除标签内空白符
  2. 去除注释
  3. js表达式压缩
  4. 去除属性间空格
  5. 内容为空的标签使用/>结尾
  6. 属性值为true的使用简写形式 <image lazy-load/>

5和6可以使用prettier插件prettier-plugin-auto-close-empty-tag和prettier-plugin-format-true-value-attribute)进行规范