如何在Node.js Express应用程序中渲染预编译的Jade(Pug)模板？

Question

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

如何在我的应用程序中使用这些js文件？我对nodejs/express没有太多经验,但我认为它必须要求更改渲染引擎？我已经阅读了正在使用的官方文档,runtime.js但我找不到任何文档,因为它是如何使用的.

Answer 1

Jade(现在的Pug)是一个很棒的模板引擎,但是视图的编译消耗了大量的资源.玉很慢.当然,您可以使用快速生成的"缓存视图"功能来缓存已编译的视图,但编译的视图存储在可能占用大量资源的内存中.感谢Jade,我开发的最新快速应用程序响应了超过800毫秒的第一个请求,因此我不想更改模板引擎,我和你一样,决定在我的开发中编译Jade视图环境并部署这些文件而不是原始视图.

为了使用.js由命名函数组成的文件的编译视图template,您需要使用jade 运行时.运行时生成属性值并执行其他内容,例如转义值.该template函数接受一个用于动态数据的参数.

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

1. 我们可以require使用编译后的视图(.js文件)module.exports.
2. 该函数接受第二个参数,即jade运行时.

以下代码段使用gulp,gulp-jade并且gulp-replace节点模块位于.gulpfile:

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中更改视图相关设置:

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

现在响应启动应用程序的第一个请求需要7ms.请注意,require对于不存在的文件会抛出错误,因此您可以考虑使用try/catch或承诺处理可能的异常.

Answer 2

你可以尝试一下 requirejs 模块，它非常容易使用。在服务器端代码中，您可以在文件夹中预编译 jade 文件，然后从客户端调用 require 函数来运行预编译模板，如下所示：

require(['<template_name>'], function (parse) {
                document.getElementById(<div_id).innerHTML = parse({
                    locals: <data_to_be_passed>
                })
            })