Prerenderer 使用教程

Prerenderer 使用教程

1. 项目介绍

Prerenderer 是一个快速的、灵活的、与框架无关的预渲染工具，适用于网站和单页应用程序（SPA）。它的目标是提供一个简单且易于扩展的预渲染解决方案，可以轻松地适用于任何类型的网站或单页应用。

2. 项目快速启动

在开始之前，确保你的环境中安装了 Node.js。

安装

使用 npm 安装 Prerenderer 及其相关依赖：

npm install --save-dev @prerenderer/rollup-plugin @prerenderer/renderer-puppeteer puppeteer

如果你的包管理器不会自动安装 peer dependencies，确保手动安装 puppeteer：

npm install --save-dev puppeteer

配置

创建一个 Prerenderer 实例，配置你的应用路径和渲染器：

const fs = require('fs');
const path = require('path');
const mkdirp = require('mkdirp');
const Prerenderer = require('@prerenderer/prerenderer');
const JSDOMRenderer = require('@prerenderer/renderer-jsdom');

const prerenderer = new Prerenderer({
  staticDir: path.join(__dirname, 'app'),
  renderer: new JSDOMRenderer(),
  postProcess: (renderedRoute) => {
    // 处理渲染后的页面，例如替换 URL
    renderedRoute.html = renderedRoute.html
      .replace(/http:/g, 'https:')
      .replace(/(https:\/\/)?(localhost|127.0.0.1):\d*/g, process.env.CI_ENVIRONMENT_URL || '');
  }
});

// 初始化 Prerenderer
prerenderer.initialize();

渲染页面

定义要渲染的路由，并启动渲染过程：

prerenderer.renderRoutes([
  '/',
  '/about',
  '/some/deep/nested/route'
]).then(renderedRoutes => {
  renderedRoutes.forEach(renderedRoute => {
    try {
      const outputDir = path.join(__dirname, 'app', renderedRoute.route);
      const outputFile = `${outputDir}/index.html`;
      mkdirp.sync(outputDir);
      fs.writeFileSync(outputFile, renderedRoute.html.trim());
    } catch (e) {
      // 错误处理
    }
  });
  return prerenderer.destroy();
}).catch(err => {
  return prerenderer.destroy(); // 关闭服务器和渲染器
});

3. 应用案例和最佳实践

案例一：静态站点预渲染

对于静态站点，Prerenderer 可以将所有页面预渲染成静态 HTML 文件，提高页面加载速度。

// 伪代码，具体实现需要根据项目结构进行调整
const routes = getRoutesFromYourProject();
prerenderer.renderRoutes(routes).then(() => {
  console.log('所有页面预渲染完成');
});

最佳实践

• 预渲染动态内容时，确保有占位符组件，以避免客户端加载动态内容时的不一致体验。
• 对于具有大量路由的项目，考虑分批预渲染，以避免渲染过程过慢。

4. 典型生态项目

Prerenderer 支持多种渲染器，以下是两个常用的渲染器：

• @prerenderer/renderer-jsdom：使用 jsdom 进行渲染，适用于简单的预渲染场景。
• @prerenderer/renderer-puppeteer：使用 Puppeteer 在无头 Chrome 中渲染页面，适用于更复杂的预渲染需求。

根据项目需求选择合适的渲染器，以获得最佳效果。