预编译模板的核心目标是将运行时的解析、语法分析和函数生成提前至构建或初始化阶段完成，使加载后可直接执行已编译逻辑，跳过耗时动态处理。

预编译模板的核心目标，是把原本在运行时才做的解析、语法分析和函数生成工作，提前到构建或初始化阶段完成。这样浏览器或服务端加载代码后，就能直接执行已编译好的逻辑，跳过耗时的动态处理环节。

明确区分编译与执行两个阶段

模板系统（如 Handlebars、Vue、Go template、Twig）在默认模式下，每次渲染都要经历“读取字符串 → 词法分析 → 语法树构建 → 生成可执行函数”这一整套流程。这个过程不仅消耗 CPU，还会带来内存分配波动。预编译就是把前几步固化下来，只保留最后的“执行”动作。 - 编译阶段：输入是模板源码（`.hbs`、`.vue`、`.tmpl` 等），输出是等效的 JavaScript 函数或 PHP 类文件 - 执行阶段：仅传入数据，调用已编译函数，无解析行为

例如 Vue 单文件组件中，使用 vite-plugin-vue-jsx 或 @vue/compiler-sfc 在构建时就把 `

按技术栈选择对应预编译方式

不同模板引擎有各自推荐的预编译路径，关键在于“一次编译、多次复用”：

• Handlebars：用 CLI 工具生成 .js 文件

  npx handlebars src/templates/ -f dist/templates.js

  客户端只引入 handlebars.runtime.js，再加载 templates.js 中导出的函数

• Go template：定义为包级变量，确保初始化时完成编译

  var userTpl = template.Must(template.New("user").Parse(`<div>{{.Name}}</div>`))

• Twig（PHP）：启用文件缓存并关闭调试模式

  $twig = new \Twig\Environment($loader, [
      'cache' => '/var/cache/twig',
      'debug' => false,
  ]);

• Vue（SFC）：在构建工具中配置 compilerOptions 或使用 defineComponent 配合 compileTemplate API 提前生成

验证是否真正生效

不能只看“写了 Must(Parse)”就认为已完成预编译。需确认三点： - 模板字符串是否来自静态字面量（而非运行时拼接或网络请求） - 编译操作是否只发生一次（比如在 `init()`、包变量、构建脚本里），而不是每次 HTTP 请求或组件渲染都调用 `Parse()` - 是否避免在模板中写复杂表达式（如 `{{ funcA().filter(x => x > 1).map(...) }}`），这类逻辑应前置到数据准备阶段

只要满足以上条件，运行时就不再触发语法分析器，CPU 占用下降明显，首屏渲染延迟通常可降低 40%–70%。