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

问题描述

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

I have a nodejs app that uses Express and Jade(now Pug).I want to precompile the jade templates for better performance. I have been able to convert the jade to javascript using jade --client to compile all the .jade files to corresponding .js.

如何在我的应用程序中使用这些js文件?我没有使用nodejs/express的丰富经验，但是我认为它必须更改渲染引擎吗?我已经阅读了说要使用runtime.js的官方文档，但找不到任何文档来确切说明其用途.

How do I use these js files in my app? I don't have much experience with nodejs/express, but I think it must require changing the rendering engine? I have read the official documentation that says to use runtime.js but I couldn't find any documentation as how exactly it is to be used.

推荐答案

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

Jade (now Pug) is a great templating engine, but the compilation of the views consume so much resources. Jade is slow. Of course you can use the "cache view" feature of express on production that caches the compiled views, but the compiled views are stored in memory that can consume so much resources. Thanks to Jade, the latest express app that I had developed responded to the first request in more than 800ms, so as I didn't want to change the templating engine, I, just like you, decided to compile the Jade views on my development environment and deploy these files instead of original views.

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

In order to use the compiled views which are .js files consisting of a function named template, you need to use the jade runtime. The runtime generates the attribute values and does other stuff like escaping values. The template function accepts one argument which is for dynamic data.

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

Since these functions are compiled for client side, the compiled views depends on a global jade runtime (i.e. window.jade). In node.js you can populate the GLOBAL object, i.e. GLOBAL.jade = require('jade/lib/runtime') but it's not a good idea. I decided to modify the compiled function so:

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

1. We can require the compiled view (.js files) by using module.exports.
2. The function accepts a second argument which is the jade runtime.

以下代码段在.gulpfile中使用gulp，gulp-jade和gulp-replace节点模块:

The following code snippet uses gulp, gulp-jade and gulp-replace node modules in a .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文件.但是还有另一个问题. (据我所知)没有使用这些文件的预制模板引擎.因此，我们需要定义一个新引擎.很简单:

Now that we have changed the function declaration we can load the compiled files (.js files) instead of the .jade files. But there is another problem. There is no pre-made templating engine (as far as I know) for using these files. So we need to define a new engine. It's pretty easy:

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);
});

现在，我们可以快速更改与视图相关的设置:

Now we can change the view related settings in express:

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

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

Now responding to the first request on startup of the application takes 7ms for me. Just note that require throws error for files that do not exist so you can consider using try/catch or promises for handing the possible exceptions.

这篇关于如何在Node.js Express应用程序中呈现预编译的Jade(Pug)模板?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！