Angular 2通用缓存服务器上渲染的页面

Ger*_*amo 2 angular-universal angular

关于角度通用的两个问题:

  1. 我如何让 Angular 在服务器端缓存渲染的页面,因为客户端的初始响应大约需要 2 秒,因为 Angular 每次都会在服务器端生成页面。

  2. 在前端,似乎 Angular 正在破坏网站,例如 self.context.(funcname) 不存在。我知道这些问题与调用函数的范围有关,如果我不使用通用(包括预引导),这些问题确实有效。

有任何想法吗。

Ger*_*amo 5

只是为了回答这个问题:

我简单地在 server.ts 中制作了一个自定义解决方案:

const cache = {};

function ngApp(req, res) {
  let baseUrl = '/';
  let url = req.originalUrl || '/';
  res.setHeader('Cache-Control', 'public, max-age=300');
  if (cache.hasOwnProperty(url)) {
      var hit = cache[url];
      if (hit[0] > Date.now()) {
        res.status(200).send(hit[1]);
        return;
      }
  }

  res.render('index', {
    req,
    res,
    ngModule: MainModule,
    preboot: {
      appRoot: ['app'],
      uglify: false,
      buffer: true
    },
    async: false,
    baseUrl: baseUrl,
    requestUrl: req.originalUrl,
    originUrl: 'http://localhost:3000'
  },(err, html) => {
    cache[url] = [Date.now()+180000,html];
    res.status(200).send(html);
  });
}
app.get('*', ngApp);
app.get('/', ngApp);
Run Code Online (Sandbox Code Playgroud)

所以基本上我会检查内存中的变量是否有请求的 url 的现有缓存条目,如果没有,或者它已过期,则我重新渲染页面并更新/创建缓存条目。

这极大地改善了后续请求的交付。本地时间从 1 秒左右下降到仅 10 毫秒。