Open canfoo opened 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}}"/>,则直接生成,就不需要生成上面的动态化模板,从而减少包大小。
<template wx:elif="{{d.tempName}}" is="{{d.tempName}}" data="{{...d}}"/>
@canfoo 非常赞!, 如果命中的比较多, 性能可能就真的和原生小程序差不多了
哈哈,是啊,主要还是可以减少很多代码,我一个组件优化完后,减少了8KB了。另外应该还可以对 children,数组等这些情况进行命中处理,后续有时间我再补上。
alita 在JSX碰到 {} 这种语法块,会生成一块动态化模板片段,即:
大多数情况下,上面动态化模板会命中
<template wx:elif="{{d.tempName}}" is="{{d.tempName}}" data="{{...d}}"/>
, 所以可以针对这种情况,做下静态解析优化,如果在静态解析就知道 {} 会转换为<template wx:elif="{{d.tempName}}" is="{{d.tempName}}" data="{{...d}}"/>
,则直接生成,就不需要生成上面的动态化模板,从而减少包大小。