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

2022-05-02 本文已影响0人涅槃快乐是金

预渲染原理

在webpack打包结束并生成文件后（after-emit hook），会启动一个server模拟网站的运行，用puppeteer（google官方的headless 无头浏览器）访问指定的页面route，得到相应的html结构，并将结果输出到指定目录，过程类似于爬虫。

预渲染应用场景：

seo优化 对于一些动态数据利用renderAfterTime也可以进行预渲染出来。当动态数据渲染出来之后，客户端代码比如bundle.js会立马接管dom操作。对于spa优化可谓是非常方便。

对于meta头的seo优化会结合vue-meta-info插件来优化

骨架屏。 两种思路：

把骨架屏当做预渲染页面，当ajax获取到数据之后再把骨架屏替换掉
prerender-spa-plugin提供了postProcessHtml钩子

 postProcessHtml: function (context) {
        var titles = {
          '/': '首页',
          '/about': '关于',
          '/contact': '链接'
        }
        return context.html.replace(
          /<title>[^<]*<\/title>/i,
          '<title>' + titles[context.route] + '</title>'
        )
      }

此钩子会返回转义之后的静态页面，配置好的路由都会走此回调，对于动态生成骨架屏，这也是一种思路,转义之后的字符处理起来比较麻烦(有待考究)

预渲染不适用经常变化的数据，比如说股票代码网站，天气预报网站。因为此时的数据是动态的，而预渲染时已经生成好了dom节点。如果要兼容seo可以使用SSR。预渲染不适用大量的路由页面,比如成千上百个路由，此时打包后预渲染将会非常慢。预渲染最好的应用场景是需要seo的活动页面，配合vue-meta-info插件优化meta标签，开箱即用。

如何把异步数据渲染成静态页面

三种方案

plugin中设置renderAfterTime：5000 //触发渲染的时间，用于获取数据后再保存渲染结果
plugin中设置

renderAfterDocumentEvent: 'render-event'

根组件中设置

new Vue({
  el: '#app',
  mounted () {
    setTimeout(() => {
      document.dispatchEvent(new Event('render-event'))
    }, 5000)
  }
})

注意不是在根组件中设置此事件无效（比如你想在ajax获取之后再再派发事件，此时并不会触发预渲染）

plugin中设置

renderAfterElementExists: 'my-app-element'

会等待dom节点class为my-app-element生成功之后再进行预渲染

生成的路由跳转新页面

   <router-link to="/about" target="_blank" >About</router-link>

如何处理某些节点是否需要预渲染

plugin中配置

  renderer: new Renderer({
       renderAfterTime: 5000,
       injectProperty: '__PRERENDER_INJECTED',
       inject: {
         foo: 'bar'
       }
     })

页面中使用

  setTimeout(() => {
     if (window['__PRERENDER_INJECTED']) {
       return
     }
    this.data = '我是异步渲染出来的数据'
  }, 3000)
}

预渲染会在5秒后完成并且不会对data数据进行预渲染

prerender-spa-plugin的一些坑

路由生成对应的页面(.html)时某些数据没有被渲染出来

在根组件上添加data-server-rendered ='true'

  <div id="app" data-server-rendered="true"></>

直接访问某个为.html文件的后缀时只能渲染出静态页面，不会渲染到对应的路由。

style加载了2次官方bug并未解决

刷新总是会闪一下首页

这个是服务端渲染后,样式文件没跟上导致的,css要提取成一个文件就好了,了解一下这个plugin ExtractTextPlugin

配置不生成文件夹，值生成html文件时

  postProcess (renderedRoute) {
       // 重点
       // 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
  }

打包之后会报错解决办法：去掉data-server-rendered="true" 但是此时又会出现路由对应的路由无法渲染的问题。无解。