预加载

什么是预加载 预加载指的是在浏览器发现 HTML/JavaScript 中的资源（JavaScript、CSS、image 等）之前加载它们，以避免网络往返

默认情况下，vite-plugin-ssr 会自动将脚本、样式、和预加载标签注入到 HTML 中。它还会自动生成 Early Hints

使用 injectFilter() 我们可以控制插入预加载标签的位置

Early Hints

Early Hints Header 是现已弃用的 HTTP2/Push 的后继者，是预加载资源的推荐方式

// server.js

import { renderPage } from "vite-plugin-ssr";

app.get("*", async (req, res) => {
  const pageContext = await renderPage({ urlOriginal: req.originalUrl });
  const { earlyHints } = pageContext.httpResponse;
  // For exampe with Node.js 18:
  res.writeEarlyHints({ link: earlyHints.map((e) => e.earlyHintLink) });
});

type PageContext = {
  httpResponse: {
    earlyHints: {
      earlyHintLink: string; // Header Line for the Early Hint Header
      assetType: "image" | "script" | "font" | "style" | null;
      mediaType: string; // MIME type
      src: string; // Asset's URL
      isEntry: boolean; // true  ⇒ asset is an entry
      // false ⇒ asset is a dependency of an entry
    }[];
  };
};

Examples: $ npm init vite-plugin-ssr@latest.

参考：

`injectFilter()`

vite-plugin-ssr 会自动注入预加载和资源标签，但是，如果 vite-plugin-ssr 的默认预加载策略不起作用，我们可以控制注入预加载和资源标签的位置

// /renderer/_default.page.server.js

export async function render(pageContext) {
  // ...

  const documentHtml = escapeInject`<!DOCTYPE html>
    <html>
      <body>
        <div id="page-view">${stream}</div>
      </body>
    </html>`;

  const injectFilter = (assets) => {
    assets.forEach((asset) => {
      // Preload images
      if (asset.assetType === "image") {
        asset.inject = "HTML_BEGIN";
      }
    });
  };

  return { documentHtml, injectFilter };
}

请参考 API > injectFilter().

✍ Edit this page