alita icon indicating copy to clipboard operation
alita copied to clipboard

通过静态分析减小wxml大小

Open canfoo opened this issue 5 years ago • 2 comments
trafficstars

alita 在JSX碰到 {} 这种语法块,会生成一块动态化模板片段,即:

<template name="c">
        <block wx:if="{{_t.l(d)}}">{{d}}</block>
        <_g wx:elif="{{d._generic}}" diuu="{{d._generic}}" style="{{_t.s(d._genericstyle)}}"/>
        <template wx:elif="{{d.tempName}}" is="{{d.tempName}}" data="{{...d}}"/>
        <block wx:else>
            <block wx:for="{{d}}" wx:key="key">
                <block wx:if="{{_t.l(item)}}">{{item}}</block>
                <_g wx:elif="{{item._generic}}" diuu="{{item._generic}}" style="{{_t.s(item._genericstyle)}}"/>
                <template wx:else is="{{item.tempName}}" data="{{...item}}"/>
            </block>
        </block>
  </template>

大多数情况下,上面动态化模板会命中 <template wx:elif="{{d.tempName}}" is="{{d.tempName}}" data="{{...d}}"/>, 所以可以针对这种情况,做下静态解析优化,如果在静态解析就知道 {} 会转换为 <template wx:elif="{{d.tempName}}" is="{{d.tempName}}" data="{{...d}}"/>,则直接生成,就不需要生成上面的动态化模板,从而减少包大小。

canfoo avatar Jun 28 '20 10:06 canfoo

@canfoo 非常赞!, 如果命中的比较多, 性能可能就真的和原生小程序差不多了

ykforerlang avatar Jul 09 '20 02:07 ykforerlang

@canfoo 非常赞!, 如果命中的比较多, 性能可能就真的和原生小程序差不多了

哈哈,是啊,主要还是可以减少很多代码,我一个组件优化完后,减少了8KB了。另外应该还可以对 children,数组等这些情况进行命中处理,后续有时间我再补上。

canfoo avatar Jul 09 '20 03:07 canfoo