Browser Usage

在浏览器端使用 nunjucks 需要考虑更多，因为需要非常关注加载和编译时间。在服务端，模板一次编译后就缓存在内存中，就不用担心了。在浏览器端，你甚至不想编译他，因为会降低渲染的速度。

解决方案是将模板预编译成 javascript，和普通的 js 一样加载。

可能你想在开发时动态的加载模板，这样你可以在文件变化的时候马上看到而不需要预编译。Nunjucks 已经帮你适配了你想要的工作流。

有一点必须遵守：在生产环境一定要预编译模板。为什么？不仅因为在页面加载时编译模板速度很慢，而且是同步加载模板的，会阻塞整个页面。这很慢，因为 nunjucks 模板不是异步的。

在客户端，有两种最常用的方式来初始设置 nunjucks。注意这是两个不同的文件，其中一个包括编译器 nunjucks.js，另一个不包括 nunjucks-slim.js。查看 Getting Started 区分两者。

查看 Precompiling 了解预编译。

Setup # 1: only precompile in production

这个方法可以让你在开发环境可以动态加载模板（可以马上看到变化），在生产环境使用预编译的模板。

  • 使用 script 或模块加载器加载 nunjucks.js。
  • 渲染模板 (example)!
  • 当发布到生产环境时，When pushing to production, 将模板预编译 成 js 文件。
在生产环境中，你可以使用 nunjucks-slim.js 代替 nunjucks.js 进行优化，因为你使用了预编译的模板。nunjucks-slim.js 只有 8K 而不是 20K，因为不包括编译器。但是这使初始设置复杂化了，因为在开发和生产环境需要不同的 js 文件，是否值得完全在你如何使用。

Setup # 2: always precompile

这个方法是在开发和生产环境都使用预编译的模板，这样可以简化初始设置。但是在开发时，你需要一些工具来自动预编译，而不是手动编译。

  • 开发时，使用 grunt或gulp 监听文件目录，当文件变化后自动编译成 js 文件。
  • 使用 script 或模块加载器加载 nunjucks-slim.js 和你编译的 js 文件（如 templates.js）。
  • 渲染模板 (example)!
    使用这个方法，开发和生产环境无区别，只需提交 templates.js 并部署到生产环境。