7

Express と Jade (現在は Pug) を使用する nodejs アプリがあります。パフォーマンスを向上させるために、jade テンプレートをプリコンパイルしたいと考えています。jade --clientすべての.jadeファイルを対応する.jsにコンパイルすることを使用して、jadeをjavascriptに変換できました。

アプリでこれらの js ファイルを使用するにはどうすればよいですか? nodejs/express の経験はあまりありませんが、レンダリング エンジンを変更する必要があると思いますか? 使用するように記載されている公式ドキュメントを読みましたが、runtime.js正確にどのように使用するかについてのドキュメントは見つかりませんでした。

4

3 に答える 3

10

Jade (現在の Pug) は優れたテンプレート エンジンですが、ビューのコンパイルには多くのリソースが消費されます。ジェイドは遅い。もちろん、コンパイル済みビューをキャッシュする Express on production の「キャッシュ ビュー」機能を使用できますが、コンパイル済みビューはメモリに格納されるため、大量のリソースを消費する可能性があります。Jade のおかげで、私が開発した最新の Express アプリは最初のリクエストに 800 ミリ秒以上で応答しました。そのため、テンプレート エンジンを変更したくなかったので、あなたと同じように、私の開発に関する Jade ビューをコンパイルすることにしました。元のビューの代わりにこれらのファイルをデプロイします。

.jsという名前の関数で構成されるファイルであるコンパイル済みビューを使用するには、jadeランタイムtemplateを使用する必要があります。ランタイムは属性値を生成し、値のエスケープなどの処理を行います。この関数は、動的データ用の 1 つの引数を受け入れます。template

これらの関数はクライアント側用にコンパイルされるため、コンパイルされたビューはグローバル jade ランタイム (つまりwindow.jade) に依存します。node.js では、GLOBALオブジェクトを設定できます。つまりGLOBAL.jade = require('jade/lib/runtime')、それは良い考えではありません。コンパイルされた関数を次のように変更することにしました。

  1. を使用requireして、コンパイルされたビュー (.jsファイル) を表示できますmodule.exports。
  2. この関数は、jade ランタイムである 2 番目の引数を受け入れます。

次のコード スニペットでは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の代わりにコンパイル済みファイル ( files)をロードでき.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);
});

これで、ビュー関連の設定をエクスプレスで変更できます。

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

アプリケーションの起動時に最初のリクエストに応答するのに 7 ミリ秒かかります。require存在しないファイルに対してエラーをスローすることに注意してください。そのため、使用を検討しtry/catchたり、可能な例外を処理することを約束したりできます。

于 2016-06-14T20:55:30.643 に答える
0

非常に使いやすいrequirejsモジュールを試すことができます。サーバー側のコードでは、フォルダー内の jade ファイルを事前にコンパイルできます。次に、クライアント側から、事前にコンパイルされたテンプレートを実行するために require 関数を呼び出すことができます。次のようになります。

require(['<template_name>'], function (parse) {
                document.getElementById(<div_id).innerHTML = parse({
                    locals: <data_to_be_passed>
                })
            })
于 2013-05-04T16:49:57.917 に答える