如何使用prerender-spa-plugin插件对页面进行预渲染

本文主要是介绍使用prerender-spa-plugin插件在针对前端代码进行预渲染。

预渲染（SSG）和服务端（SSR）渲染有一定的区别，大家想要了解的话可以看：https://segmentfault.com/a/1190000023469150。

背景

因为之前的网站是使用Vue开发的，这种前端JavaScript渲染的开发模式，对于搜索引擎来说非常的不友好，没有办法抓取到有效的信息。因此为了进行SEO，我们需要对页面进行一些预渲染。

预渲染比较适合静态或者变化不大的页面，能够通过部署前的一次静态渲染，将页面上大部分内容都渲染出来。这样搜索引擎在爬取的时候，就能够爬到相关的内容信息。

现状

目前商企通官网情况列举如下：

• 技术栈使用的是Vue，脚手架使用的是vue-cli，使用JavaScript前端渲染方案（这个方案对技术栈没有要求，兼容所有方案）

• 发布工具使用的是公司的工具，打包过程中，HTML资源传递到A域名下，CSS、JS、Image等资源传递到B域名下。

目标

希望能够通过预渲染，让页面在初次访问没有执行JavaScript时，就能够携带足够的信息，即将JavaScript渲染的内容提前渲染到HTML中。

发布期望不做过多的修改。

方案

我们本次方案主要采用的是prerender-spa-plugin这个webpack的插件来实现的。

它的主要原理是启动浏览器，渲染完成后抓取HTML，然后再替换掉原有HTML。

我们需要实现预渲染，那么我们需要完成以下几件事情：

1. 插件引入和配置。

2. 本地验证。

3. 改造打包构建流程。

4. 线上验证。

下面，我们一个一个来说下，我们如何做这个事情的。

插件引入和配置

首先，我们需要引入一个预渲染插件，执行命令：

mnpm i prerender-spa-plugin -D

这个命令除了安装插件本身以外，依赖了puppeteer，然后puppeteer又依赖落地chromium，所以最后我们其实是需要在依赖中安装一个chromium。

如果大家安装puppeteer非常慢或者经常失败，可以参考下这个文档中的方法：https://brickya