使用预渲染提升页面加载速度

弱网环境下，预渲染能更快地呈现页面内容，减少页面可见时间。

Prerender SPA Plugin

prerender-spa-plugin 是一个 webpack 插件用于在单页应用中预渲染静态 html 内容。因此，该插件限定了你的单页应用必须使用 webpack 构建，且它是框架无关的，无论你是使用 React 或 Vue 甚至不使用框架，都能用来进行预渲染。

prerender-spa-plugin 原理

那么 prerender-spa-plugin 是如何做到将运行时的 html 打包到文件中的呢？原理很简单，就是在 webpack 构建阶段的最后，在本地启动一个 phantomjs，访问配置了预渲染的路由，再将 phantomjs 中渲染的页面输出到 html 文件中，并建立路由对应的目录。
 

使用预渲染步骤：

1、安装

     npm install prerender-spa-plugin --save

2、在webpack.prod.conf.js增加相关内容

const PrerenderSPAPlugin = require('prerender-spa-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')

plugins: [
  new CleanWebpackPlugin(),

  // PrerenderSpa
  new PrerenderSPAPlugin({
    // 生成文件的路径，也可以与webpakc打包的一致。
    // 下面这句话非常重要！！！
    // 这个目录只能有一级，如果目录层次大于一级，在生成的时候不会有任何错误提示，在预渲染的时候只会卡着不动。
    staticDir: path.join(__dirname, '../dist'),

    // 对应自己的路由文件，比如a有参数，就需要写成 /a/param1。
    routes: ['/', '/login'],

    // 这个很重要，如果没有配置这段，也不会进行预编译
    renderer: new Renderer({
      injectProperty: '__PRERENDER_INJECTED',
      inject: {
        prerender: true
      },
      // inject: {
      //   foo: 'bar'
      // },
      headless: true,
      // 在 main.js 中 document.dispatchEvent(new Event('render-event'))，两者的事件名称要对应上。
      // renderAfterDocumentEvent: 'render-event'
    })
  })
]

3、main.js里增加内容

     // 是否是预渲染环境

     Vue.prototype.$PRERENDER = window.__PRERENDER_INJECTED && window.__PRERENDER_INJECTED.prerender;  

 4、需要使用预渲染的页面增加内容      

    mounted() {
      if (this.$PRERENDER) { // 预渲染环境不请求接口
        return;
      }
    }