perf: 精简头条的 template

packages/remax-cli/templates/toutiao/base.ejs

@@ -1,24 +1,16 @@
 <template name="REMAX_TPL">
   <block tt:for="{{tree.root.children}}" tt:key="{{id}}">
-    <template is="REMAX_TPL_1_CONTAINER" data="{{i: item}}" />
+    <template is="{{'REMAX_TPL_' + item.type}}" data="{{i: item}}" />
   </block>
 </template>
 
-<% for (var i = 1; i <= depth; i++) { %>
-<%var id = i; %>
 <% for (let component of components) { %>
-<%- include('./component.ejs', {
-        type: component.type,
-        props: component.props,
-        id: component.id,
-        templateId: id,
-      }) %>
+  <%- include('./component.ejs', {
+    type: component.type,
+    props: component.props,
+    id: component.id,
+  }) %>
 <% } %>
-<template name="REMAX_TPL_<%=id%>_plain-text" data="{{i: i}}">
+<template name="REMAX_TPL_plain-text" data="{{i: i}}">
   <block>{{i.text}}</block>
 </template>
-<!--  把动态选择模板的逻辑放入一个模板内，可以提升性能问题 -->
-<template name="REMAX_TPL_<%=id%>_CONTAINER" data="{{i: i}}">
-  <template is="{{'REMAX_TPL_<%=id%>_' + i.type}}" data="{{i: i}}" />
-</template>
-<% } %>

packages/remax-cli/templates/toutiao/component.ejs

@@ -1,19 +1,27 @@
 <% camelCased = function(str) { return str.replace(/-([a-z0-9])/g, function (g) { return g[1].toUpperCase(); })}%>
 
-<template name="REMAX_TPL_<%=templateId%>_<%=id%>">
+<template name="REMAX_TPL_<%=id%>">
   <<%=id%> <% for(let key of props) { %> <%=key%>="{{i.props.<%=camelCased(key)%>}}" <% } %>>
     <% if (id === 'swiper') { %>
-    <block tt:for="{{i.children}}" tt:key="{{id}}">
-      <swiper-item key="{{item.props.key}}">
-        <block tt:for="{{item.children}}" tt:key="{{id}}">
-          <template is="REMAX_TPL_<%= templateId + 1%>_CONTAINER" data="{{i: item}}" />
-        </block>
-      </swiper-item>
-    </block>
+      <block tt:for="{{i.children}}" tt:key="{{id}}">
+        <swiper-item key="{{item.props.key}}">
+          <block tt:for="{{item.children}}" tt:key="{{id}}">
+            <template is="{{'REMAX_TPL_' + item.type}}" data="{{i: item}}" />
+          </block>
+        </swiper-item>
+      </block>
+    <% } else if (id === 'picker-view') { %>
+      <block tt:for="{{i.children}}" tt:key="{{item.id}}">
+        <picker-view-column>
+          <view tt:for="{{item.children}}">
+            <template is="{{'REMAX_TPL_' + item.type}}" data="{{i: item}}" />
+          </view>
+        </picker-view-column>
+      </block>
     <% } else { %>
-    <block tt:for="{{i.children}}" tt:key="{{id}}">
-      <template is="REMAX_TPL_<%= templateId + 1%>_CONTAINER" data="{{i: item}}" />
-    </block>
+      <block tt:for="{{i.children}}" tt:key="{{id}}">
+        <template is="{{'REMAX_TPL_' + item.type}}" data="{{i: item}}" />
+      </block>
     <% } %>
   </<%=id%>>
 </template>