alita
alita copied to clipboard
通过静态分析减小wxml大小
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 非常赞!, 如果命中的比较多, 性能可能就真的和原生小程序差不多了
@canfoo 非常赞!, 如果命中的比较多, 性能可能就真的和原生小程序差不多了
哈哈,是啊,主要还是可以减少很多代码,我一个组件优化完后,减少了8KB了。另外应该还可以对 children,数组等这些情况进行命中处理,后续有时间我再补上。