vue预渲染之prerender-spa-plugin解析(一)

太过爱你忘了你带给我的痛 2022-04-13 09:46 542阅读 0赞

**前言:这几天一直看怎么样优化页面加载速度,一个页面的加载等待时间很长的话,确实很不友好,反正如果是app的话,我会直接卸载的,所以各个厂商为了能让用户尽快的看到页面内容做了一系列的操作(预渲染、ssr、同构等等),我们今天来看一下预渲染.**

什么是预渲染?  
为什么需要用预加载呢?  
以一个vue的spa(单页面)应用为例,我们用打包工具打包完毕后,我们的页面大概是这样的:

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Z2X2J1Zw_size_16_color_FFFFFF_t_70]  
然后我们运行下页面后:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Z2X2J1Zw_size_16_color_FFFFFF_t_70 1]

我们加载页面的时候,浏览器的渲染包含:html的解析、dom树的构建、cssom构建、javascript解析、布局、绘制,以上面例子看来,当解析到javascript的时候才回去触发vue的渲染,然后元素挂载到id为app的div上,这个时候我们才能看到我们页面的内容,所以即使vue渲染机制很快我们仍然能够看到一段时间的白屏情况,我们当然希望是加载页面的时候就可以看到内容了,而无需等待长时间的渲染,为了解决spa应用出现的白屏情况,我们需要在加载js之前做一下页面的预渲染,这样用户就能尽可能快的看到页面内容.

github上已经有一些预渲染框架了,原理都差不多,我这里就以[prerender-spa-plugin][]为例了,我们来一步一步解析一下.

先看一下官网的解释:

This is the stable 3.x version of prerender-spa-plugin based on puppeteer. If you’re looking for the (now-deprecated) 2.x version, based on PhantomJS, take a look at the v2 branch.

The goal of this plugin is to provide a simple prerendering solution that is easily extensible and usable for any site or single-page-app built with webpack.

Plugins for other task runners and build systems are planned.

简单翻译一下:“框架是3.0以上是基于puppeteer,2.0是基于PhantomJS为了解决单页面应用的预渲染问题”

简单的画了一下prerender-spa-plugin插件的工作流程图:

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Z2X2J1Zw_size_16_color_FFFFFF_t_70 2]

因为插件的代码也不是很多,我们就不根据官网提示安装了,我们直接撸它的代码,我们拖一部分源码到工程中:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Z2X2J1Zw_size_16_color_FFFFFF_t_70 3]

小伙伴自己去github上拖代码哈,我就不贴了~

然后我们需要安装几个依赖库:  
promise-limit(工具库)  
puppeteer(操纵木偶的人)  
两个库的具体用法我就不介绍了哈,我们直接在项目中执行:

npm install promise-limit --save
    npm install puppeteer --save

在安装puppeteer的时候如果遇到问题了可以用yarn命令:

yarn add puppeteer --save

然后去我们找到我们的webpack.prod.conf.js文件:

'use strict'
    const path = require('path')
    const utils = require('./utils')
    const webpack = require('webpack')
    const config = require('../config')
    const merge = require('webpack-merge')
    const baseWebpackConfig = require('./webpack.base.conf')
    const CopyWebpackPlugin = require('copy-webpack-plugin')
    const HtmlWebpackPlugin = require('html-webpack-plugin')
    const ExtractTextPlugin = require('extract-text-webpack-plugin')
    const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
    const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
    
    const env = require('../config/prod.env')
    const PrerenderSPAPlugin = require('../prerender')
    const Renderer = PrerenderSPAPlugin.PuppeteerRenderer
      ....
    webpackConfig.plugins.push(new PrerenderSPAPlugin({
      staticDir: path.join(config.build.assetsRoot),
      routes: ['/index.html'],
      renderer: new Renderer({
        headless: false,
        renderAfterDocumentEvent: 'render-event'
      })
    }))
    module.exports = webpackConfig

我们添加了一个PrerenderSPAPlugin插件

然后我们在我们的page-a.vue的mounted中告诉预加载框架加载结束:

page-a.vue:

<template>
      <div id="page-a-container">
        我是a页面<br>
        <button @click="onClick">登录</button>
      </div>
    </template>
    <script>
      export default {
        name: 'pageA',
        mounted() {
          console.log(this.$store.state.route)
          document.dispatchEvent(new Event('render-event'))
        },
        methods: {
          onClick() {
            this.$store.dispatch('login')
          }
        }
      }
    </script>
    <style scoped>
      #page-a-container {
        background-color: red;
        color: white;
        font-size: 24px;
        height: 100%;
      }
    </style>

document.dispatchEvent(new Event('render-event'))

然后我们执行:

npm run build

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Z2X2J1Zw_size_16_color_FFFFFF_t_70 4]

我们打开我们的index.html文件看一下:

<!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width,initial-scale=1">
      <title>vuexdemo</title>
      <link href="./static/css/app.4024098bac65ecfd7b57ced4b9a7ca18.css" rel="stylesheet">
    </head>
    <body>
    <div id="app">
      <div data-v-5e9a6bbe="" id="page-a-container" class="router-view">
        我是a页面<br data-v-5e9a6bbe="">
        <button data-v-5e9a6bbe="">登录</button>
      </div>
    </div>
    <script type="text/javascript" src="./static/js/manifest.3ad1d5771e9b13dbdad2.js"></script>
    <script type="text/javascript" src="./static/js/vendor.0455d420b608053dd0d0.js"></script>
    <script type="text/javascript" src="./static/js/app.ea2bad6fa5b2bf0b1ce4.js"></script>
    </body>
    </html>

可以看到,已经是我们渲染完毕后的页面了~ 到此prerender-spa-plugin的集成算是结束了

这节先到这里了,下一节我们照着老套路从头到尾的撸一遍源码.  
先到这里啦，欢迎志同道合的小伙伴入群，一起交流一起学习～～ 加油骚年！！  
qq群链接：  
![在这里插入图片描述][SouthEast]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Z2X2J1Zw_size_16_color_FFFFFF_t_70]: /images/20220413/68e106391eb8494aad1802215f33fdee.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Z2X2J1Zw_size_16_color_FFFFFF_t_70 1]: /images/20220413/24036eb5ffea46bd8a58c2948fccc67e.png
[prerender-spa-plugin]: https://github.com/chrisvfritz/prerender-spa-plugin
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Z2X2J1Zw_size_16_color_FFFFFF_t_70 2]: /images/20220413/c78284107b9449bc89016ecf46a7ef23.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Z2X2J1Zw_size_16_color_FFFFFF_t_70 3]: /images/20220413/0532e04612c145a0b7f6c457979d8ed1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Z2X2J1Zw_size_16_color_FFFFFF_t_70 4]: /images/20220413/966289605ee54566ae9dd90e6305040e.png
[SouthEast]: /images/20220413/5f19c71c4f344436a893b6b648a2c061.png