背景
因为之前的网站是使用Vue开发的,这种前端JavaScript渲染的开发模式,对于搜索引擎来说非常的不友好,没有办法抓取到有效的信息。因此为了进行SEO,我们需要对页面进行一些预渲染。
预渲染比较适合静态或者变化不大的页面,能够通过部署前的一次静态渲染,将页面上大部分内容都渲染出来。这样搜索引擎在爬取的时候,就能够爬到相关的内容信息。
现状
目前商企通官网情况列举如下:
- 技术栈使用的是Vue,脚手架使用的是vue-cli,使用JavaScript前端渲染方案(这个方案对技术栈没有要求,兼容所有方案)
- 发布工具使用的是公司的工具,打包过程中,HTML资源传递到A域名下,CSS、JS、Image等资源传递到B域名下。
目标
希望能够通过预渲染,让页面在初次访问没有执行JavaScript时,就能够携带足够的信息,即将JavaScript渲染的内容提前渲染到HTML中。
发布期望不做过多的修改。
方案
我们本次方案主要采用的是prerender-spa-plugin这个webpack的插件来实现的。
它的主要原理是启动浏览器,渲染完成后抓取HTML,然后再替换掉原有HTML。
我们需要实现预渲染,那么我们需要完成以下几件事情:
- 插件引入和配置。
- 本地验证。
- 改造打包构建流程。
- 线上验证。
下面,我们一个一个来说下,我们如何做这个事情的。
插件引入和配置
首先,我们需要引入一个预渲染插件,执行命令:
mnpm i prerender-spa-plugin -D
这个命令除了安装插件本身以外,依赖了puppeteer,然后puppeteer又依赖落地chromium,所以最后我们其实是需要在依赖中安装一个chromium。
安装完成后,我们就可以在webpack的配置文件中增加对应的配置了。
如果大家使用的也是vue-cli,那么我们需要增加的配置是在vue.config.js中,如果是直接修改webpack的配置,那么方法也是类似。
下面我们以vue.config.js的修改为例:
const PrerenderSPAPlugin = require('prerender-spa-plugin');
module.exports = {
...,
configureWebpack: {
...,
chainWebpack: config