预渲染更多的理解以及源码分析

前端

2023-10-03 11:41:15

如今的一些主流框架打包的项目都是单页web应用，在页面加载时会出现首屏加载速度慢的问题。

本文将列举常见的三个解决方案，并对预渲染模块的prerender-spa-plugin源码进行注释分析。

解决方案

1. 服务器端渲染（SSR）

服务器端渲染（SSR）是指在服务器端将应用程序渲染成HTML，然后将渲染后的HTML发送给客户端。SSR的优点是首屏加载速度快，但缺点是服务器端渲染需要消耗更多的资源，并且不利于SEO。

2. 静态站点生成（SSG）

静态站点生成（SSG）是指在构建时将应用程序渲染成HTML，然后将渲染后的HTML存储在服务器上。SSG的优点是首屏加载速度快，并且有利于SEO，但缺点是构建过程可能需要很长时间，并且不适合于频繁更新的网站。

3. 预渲染

预渲染是指在应用程序加载之前，在服务器端或客户端将应用程序渲染成HTML。预渲染的优点是首屏加载速度快，并且有利于SEO，但缺点是预渲染过程可能需要一些时间，并且需要额外的配置。

prerender-spa-plugin源码分析

prerender-spa-plugin是一个用于预渲染单页web应用的插件。该插件的工作原理是在构建时将应用程序渲染成HTML，然后将渲染后的HTML存储在服务器上。当用户访问网站时，服务器将预渲染的HTML发送给客户端，客户端收到预渲染的HTML后，将其插入到DOM中，从而实现快速加载。

下面是对prerender-spa-plugin源码的注释分析：

// 入口文件
const PrerenderSPAPlugin = require('./lib/plugin')

// 插件主函数
module.exports = PrerenderSPAPlugin

// 插件构造函数
class PrerenderSPAPlugin {
  // 插件配置
  constructor(options) {
    this.options = options
  }

  // 应用插件
  apply(compiler) {
    // 注册webpack钩子
    compiler.hooks.emit.tapAsync('PrerenderSPAPlugin', (compilation, callback) => {
      // 获取输出路径
      const outputPath = compilation.options.output.path

      // 获取输出文件名
      const outputFilename = compilation.options.output.filename

      // 读取HTML文件
      const html = readFileSync(path.join(outputPath, outputFilename))

      // 预渲染HTML
      const prerenderedHtml = prerender(html, this.options)

      // 写入预渲染后的HTML文件
      writeFileSync(path.join(outputPath, 'prerendered.html'), prerenderedHtml)

      // 调用回调函数
      callback()
    })
  }
}