预编译的车把模板使文件大小翻倍

Question

我在我的应用程序中使用了车把模板引擎，主要针对桌面浏览器。

目前我以 HTML 格式分发我的所有模板并在浏览器中编译它们。我想对我的模板应用预编译以使我的应用程序更快，但事情并没有像我想象的那样工作。

我运行这样的命令来预编译和最小化我的模板：

handlebars -m example.handlebars -f example.js

然后我得到example.js 文件大小加倍！

我确实在不编译模板的情况下减少了浏览器的消耗，并且把手的运行时包要小得多。但是我的模板文件大小比我得到的要多。

那么我在预编译我的模板时做错了什么吗？
还是我误解了预编译模板的含义？

Answer 1

预编译模板时总会有大小开销，因为这样的表达式：

<div>{{values.abc}}</div>

将被编译为：

function program(data) {
  return '<div>' + program2(data) + '</div>';
}
function program2(data) {
  return data.values ? data.values.abc ? data.values.abc : '' : '';
}

但这里的大小不应该是一个主要问题。如果是，您应该考虑在需要时动态加载模板，而不是一次将所有内容发送给客户端。