node.js - 如何在 Node.js Express 应用程序中呈现预编译的 Jade (Pug) 模板？

Question

我有一个使用 Express 和 Jade(现在是 Pug)的 nodejs 应用程序。我想预编译 jade 模板以获得更好的性能。我已经能够使用 jade --client 将 jade 转换为 javascript，将所有 .jade 文件编译为相应的 .js。

如何在我的应用程序中使用这些 js 文件？我对 nodejs/express 没有太多经验，但我认为它必须改变渲染引擎？我已经阅读了说明使用 runtime.js 的官方文档，但我找不到任何关于如何使用它的文档。

Answer 1

Jade(现在是 Pug)是一个很棒的模板引擎，但是 View 的编译会消耗大量资源。 Jade 是慢。当然，您可以在生产环境中使用 express 的“缓存 View ”功能来缓存编译后的 View ，但是编译后的 View 存储在内存中，会消耗大量资源。感谢 Jade，我开发的最新的 express 应用程序在 800 多毫秒内响应了第一个请求，所以由于我不想更改模板引擎，我和你一样，决定在我的开发中编译 Jade View 环境并部署这些文件而不是原始 View 。

为了使用由名为template 的函数组成的.js 文件的编译 View ，您需要使用jade runtime .运行时生成属性值并执行其他操作，例如转义 值。 template 函数接受一个用于动态数据 的参数。

由于这些函数是为客户端编译的，编译后的 View 依赖于全局 jade 运行时(即 window.jade)。在 node.js 中，您可以填充 GLOBAL 对象，即 GLOBAL.jade = require('jade/lib/runtime') 但这不是一个好主意。我决定修改编译后的函数:

1. 我们可以使用 module.exportsrequire 编译 View (.js 文件)。
2. 该函数接受第二个参数，即 jade 运行时。

以下代码片段在 .gulpfile 中使用了 gulp、gulp-jade 和 gulp-replace Node 模块>:

gulp.task('compile-jade', () => {
    // get all the jade files and compile them for client
    return gulp.src([
        '../views/**/*.jade'
    ]).pipe(jade({
        client: true
    }))
    // replace the function definition
    .pipe(replace('function template(locals)', 'module.exports = function(locals, jade)'))
    .pipe(gulp.dest('../views_js') );
});

现在我们已经更改了函数声明，我们可以加载编译后的文件(.js 文件)而不是 .jade 文件。但是还有一个问题。没有用于使用这些文件的预制模板引擎(据我所知)。所以我们需要定义一个新的引擎。这很简单:

let jade = require('jade/lib/runtime');
app.engine('js', function (filePath, options, callback) { // define the template engine
  let data = require(filePath)(options, jade);
  callback(null, data);
});

现在我们可以在 express 中更改 View 相关的设置:

app.set('view engine', 'js');
app.set('views', path.join(__dirname, 'views_js'));

现在响应应用程序启动时的第一个请求对我来说需要 7 毫秒。请注意，require 会为不存在的文件抛出错误，因此您可以考虑使用 try/catch 或 promises 来处理可能的异常。