Skip to content

littleprincewdk/wxml-minify

Repository files navigation

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-tagprettier-plugin-format-true-value-attribute)进行规范