总结vue 预渲染

Posted 2021-09-10 看见了

环境

• vue-cli@3创建的空白项目(vue,vue-router)
• prerender-spa-plugin@3.4.0

基础

const PrerenderSPAPlugin = require("prerender-spa-plugin");
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;
const path = require("path");

module.exports = {
  configureWebpack: (config) => {
    if (process.env.NODE_ENV !== "production") return;

    return {
      plugins: [
        new PrerenderSPAPlugin({
          // 必填 - app预渲染的webpack打包输出目录
          staticDir: path.join(__dirname, "dist"),
          // 必填 - 预渲染的路由路径
          routes: ["/", "/about"],
        }),
      ],
    };
  },
};

进阶

const path = require(\'path\')
const PrerenderSPAPlugin = require(\'prerender-spa-plugin\')
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer

module.exports = {
  plugins: [
    ...
    new PrerenderSPAPlugin({
      // 必填 - app预渲染的webpack打包输出目录
      staticDir: path.join(__dirname, \'dist\'),

      // 可选 - app应该渲输出的路径
      // (默认是staticDir.)
      outputDir: path.join(__dirname, \'prerendered\'),

      // 可选 - index.html 位置
      indexPath: path.join(__dirname, \'dist\', \'index.html\'),

      // 必填 - 预渲染的路由路径
      routes: [ \'/\', \'/about\', \'/some/deep/nested/route\' ],

      // Optional - Allows you to customize the HTML and output path before
      // writing the rendered contents to a file.
      // renderedRoute can be modified and it or an equivelant should be returned.
      // renderedRoute format:
      // {
      //   route: String, // Where the output file will end up (relative to outputDir)
      //   originalRoute: String, // The route that was passed into the renderer, before redirects.
      //   html: String, // The rendered HTML for this route.
      //   outputPath: String // The path the rendered HTML will be written to.
      // }
      postProcess (renderedRoute) {
        // Ignore any redirects.
        renderedRoute.route = renderedRoute.originalRoute
        // Basic whitespace removal. (Don\'t use this in production.)
        renderedRoute.html = renderedRoute.html.split(/>[\\s]+</gmi).join(\'><\')
        // Remove /index.html from the output path if the dir name ends with a .html file extension.
        // For example: /dist/dir/special.html/index.html -> /dist/dir/special.html
        if (renderedRoute.route.endsWith(\'.html\')) {
          renderedRoute.outputPath = path.join(__dirname, \'dist\', renderedRoute.route)
        }

        return renderedRoute
      },

      // 可选 - 使用 html-minifier (https://github.com/kangax/html-minifier)
      // 压缩生成的HTML文件.
      // Option reference: https://github.com/kangax/html-minifier#options-quick-reference
      minify: {
        collapseBooleanAttributes: true, // 从布尔属性中忽略属性值
        collapseWhitespace: true, // 折叠节点之间的空白
        decodeEntities: true, // 尽可能使用Unicode字符
        keepClosingSlash: true, // 在单例元素上保留末尾斜杠
        sortAttributes: true // 按频率排列属性
      },

      // Server configuration options.
      server: {
        // 通常会自动检测到空闲端口，但如果需要可以自定义设置。
        port: 8001
      },

      // 实际要使用的预渲染器. (你可以自己编写，估计很难)
      // Available renderers: https://github.com/Tribex/prerenderer/tree/master/renderers
      renderer: new Renderer({
        // 可选 - 要添加到window对象的属性的名称，内容为`inject`.
        injectProperty: \'__PRERENDER_INJECTED\',
        // 可选 - 任何你想让你的应用程序通过\'window.injectProperty\'访问的值。
        inject: {
          foo: \'bar\'
        },

        // 可选 - 默认是0，没有限制
        // 路由是异步渲染的。
        // 使用它来限制并行渲染的路由数量。
        maxConcurrentRoutes: 4,

        // 可选 - 等待渲染，直到在文档上分派指定的事件。
        // eg, with `document.dispatchEvent(new Event(\'custom-render-trigger\'))`
        renderAfterDocumentEvent: \'custom-render-trigger\',

        // 可选 - Wait to render until the specified element is detected using `document.querySelector`
        renderAfterElementExists: \'my-app-element\',

        // 可选-等待渲染，直到一定的时间已经过去.
        // 不推荐
        renderAfterTime: 5000, // 等待5s

        // Other puppeteer options.
        // (See here: https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#puppeteerlaunchoptions)
        headless: false // Display the browser window when rendering. Useful for debugging.
      })
    })
  ]
}

参考文章

• 预渲染 prerender-spa-plugin 避坑指南