前端性能优化(四) 预渲染 prerender-spa-plugin

前言

单页面应用中，web项目只有一个页面，前端根据路由不同进行组件之间的对应切换，动态的渲染页面内容。这就是客户端渲染，具有减少服务器端压力、响应速度快等优点。但是单页应用在优化用户体验的同时，也给我们带来了一些对SEO不友好，首屏时间过长等问题。因此，服务端渲染（SSR）和预渲染（Prerender）技术应运而生。

服务端渲染与预渲染的优点

单页应用的网站内容是根据当前路径动态渲染的，查看网页源码时只有<div id="app></div>，没有实际的节点，预渲染或服务端渲染返回的html是已经拼装好的节点，有具体的内容，所以有利于SEO。并且在弱网环境或者低版本浏览器下，至少可以让用户看到首屏的内容，而不是一个空白的页面。

预渲染与服务端渲染都有以上的优点，但前者比后者需要更少的配置，实现成本低，不需要服务端的支持，纯前端就能完成。

不适合预渲染的使用场景

• 个性化内容：页面并不是对所有人展示相同的内容。
• 经常变化的内容：页面中的数据会经常发生变化，预渲染会让你的页面显示不正确直到脚本加载完成并替换成新的数据，这是一个不好的用户体验。
• 成千上万的路由：当项目中需要预渲染的路由过多时，不建议使用预渲染，这会使得构建速度很慢，因为预渲染会根据路由把代码打包成对应的不同的文件夹。

prerender-spa-plugin

预渲染插件，github地址：https://github.com/chrisvfritz/prerender-spa-plugin

如果是webpack构建的项目，参照文档上的配置即可，下面演示用vue-cli构建的项目中使用prerender-spa-plugin

1.安装

cnpm install prerender-spa-plugin --save

2.vue-config.js

const PrerenderSPAPlugin = require('prerender-spa-plugin');
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;
const path = require