areslabs / alita

一套把React Native代码转换成微信小程序代码的转换引擎工具。我们不造轮子,不发明新框架,只是提供工具把RN扩展到微信小程序端。
https://areslabs.github.io/alita
MIT License
1.96k stars 130 forks source link

通过静态分析减小wxml大小 #77

Open canfoo opened 4 years ago

canfoo commented 4 years ago

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}}"/>,则直接生成,就不需要生成上面的动态化模板,从而减少包大小。

ykforerlang commented 4 years ago

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

canfoo commented 4 years ago

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

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