预编译的把手模板使文件大小加倍

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 : '' : '';
}

但这里的尺寸不应成为主要问题。如果是，您应该考虑在需要时动态加载模板，而不是立即将所有模板发送到客户端。