2

众所周知，Meteor 发送到客户端的初始有效负载包括（在生产中）一个串联的 javascript 文件，其中包含 Meteor 平台、包和解析到 Meteor 的反应式模板系统中的所有模板。服务器端渲染（模板被渲染为 HTML 并在初始负载中发送到客户端）正在进行中，但还没有预期的发布日期。

鉴于 Meteor 0.8.x 中的可用功能，我正在寻找一种“破解”或近似服务器端渲染的方法。具体来说，我想：

  • 使页面能够呈现其初始内容，而无需首先等待数百 KB 的 Meteor 平台 javascript 文件被下载和解析。
  • 或者，修改 Meteor，使其仅发送在 javascript 有效负载中呈现初始请求所需的模板，并在呈现完成后获取剩余的模板。

用例是http://q42.com。我承认 Meteor 不是最适合像这样的静态网站，但我想试试看我能走多远。现在 Meteor 平台 JS 文件的大小超过 600 KB（压缩后为 ±200 KB），如果可能的话，我想减小这个大小。

注意：我知道并且已经在使用 Arunoda 的快速渲染包，该包旨在发送带有初始负载的数据。在这种情况下，我想通过更快地降低模板本身来缩短首次渲染时间。

4

1 回答 1

2

这有点棘手。但是有些事情你可以做。这可能不是最好的方法，但它可以帮助你以某种方式开始。

Meteor 使用许多包作为“默认”构建，有时不需要一些包。您可以删除standard-app-packages并添加此处列出的包（您需要并手动使用）：https ://github.com/meteor/meteor/blob/devel/packages/standard-app-packages/package.js

要减少模板，您必须包含您使用的裸模板并单独包含其他模板，并且可能通过集合发送模板信息，使用实时观察者句柄来启动模板

您必须在服务器端“渲染”模板，或者使用Spacebars.compilefrom the spacebars-compilerpackage 手动将它们存储在您的集合中，这有点棘手，但您可以做得很好：

这应该给你一个粗略的想法，但不确定如何通过它的“评估”位：

/private/template.html 中的 HTML 文件

<template name="test">
    Hello {{name}}
</template>

/private/template.js 中的 JS 文件

Template.test.name = function() { return "Bob" }

服务器端代码

var collection = new Meteor.Collection("templates");

var templateData = Assets.getText("template.html");
var templateJs = Assets.getText("template.js");

var compiled = Spacebars.compile(templateData).toString();
var jsData = templateJs;

collection.insert({templateName:"test", data: templateData, js:  templateJs});

客户端代码

collection.find().observeChanges({
    added: function(id, fields) {
        var template = fields.data,
            name = fields.name,
            js = fields.js;

        Template["name"] = UI.Component.extend({
            kind: "name",
            render: eval(template),
        });

        eval(js);
    }
});

然后只需订阅要求您的模板的集合，它应该存在。如果您使用iron-router我认为（不确定），您可以在模板呈现之前让订阅等待，这样您就可以让它工作。

同样，这只是一个“hacky”解决方案，我个人不喜欢它的一件事是使用eval，但是 javascript 需要以某种方式运行......

您也可以循环使用特定文件夹中的文件fs = Npm.require('fs')来呈现每个模板。

一种替代方法是注入一个“脚本”标签，调用已编译的 js 模板和模板助手以让模板存在。

于 2014-05-23T18:15:45.030 回答