vue预渲染之prerender-spa-plugin解析（⼀）Vue服务端渲染前⾔：这⼏天⼀直看怎么样优化页⾯加载速度,⼀个页⾯的加载等待时间很长的话，确实很不友好，反正如果是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
然后去我们到我们的f.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('./f')
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('../v')
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'
})
}))
我们添加了⼀个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.$ute)
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>
vuejs流程图插件<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:729038198，我们将在24小时内删除。