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

最新推荐文章于 2024-07-08 14:42:07 发布

原创最新推荐文章于 2024-07-08 14:42:07 发布 · 1.2w 阅读

10 ·

CC 4.0 BY-SA版权

html5学习笔记专栏收录该内容

30 篇文章

订阅专栏

本文介绍了Vue预渲染的概念，旨在优化页面加载速度，减少SPA应用的白屏时间。通过prerender-spa-plugin插件，利用puppeteer库在构建时生成静态HTML，实现预渲染。文章详细讲解了插件的工作流程，并提供了在项目中集成和配置prerender-spa-plugin的步骤，最终展示预渲染效果。

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

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

在这里插入图片描述
然后我们运行下页面后:

我们加载页面的时候,浏览器的渲染包含: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插件的工作流程图:

在这里插入图片描述

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

小伙伴自己去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

在这里插入图片描述

我们打开我们的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群链接：
在这里插入图片描述