vue预渲染--prerender-spa-plugin插件的使用

预渲染

我们按照vue-cli脚手架开发的vue项目，打包后是一个空的html和一些js、css，在浏览器拿到这些资源后就会根据js去请求数据、生成dom然后再插入html，这种就浏览器渲染，由于这种方式无法解决seo，而且白屏时间偏长导致对应的体验不佳，便有了预渲染和服务器渲染。

demo

三种不同渲染方式的区别：

• 客户端渲染：用户访问 url，请求 html 文件，前端根据路由动态渲染页面内容。关键链路较长，有一定的白屏时间；
• 服务端渲染：用户访问 url，服务端根据访问路径请求所需数据，拼接成 html 字符串，返回给前端。前端接收到 html 时已有当前url下的完整页面；
• 预渲染：构建阶段生成匹配预渲染路径的 html 文件（注意：每个需要预渲染的路由都有一个对应的 html）。构建出来的 html 文件已经有静态数据，需要ajax数据的部分未构建。

预渲染解决的问题

• SEO：单页应用的网站内容是根据当前路径动态渲染的，html 文件中往往没有内容，网络爬虫不会等到页面脚本执行完再抓取；
• 弱网环境：当用户在一个弱环境中访问你的站点时，你会想要尽可能快的将内容呈现给他们。甚至是在 js 脚本被加载和解析前；
• 低版本浏览器：用户的浏览器可能不支持你使用的 js 特性，预渲染或服务端渲染能够让用户至少能够看到首屏的内容，而不是一个空白的网页。

与服务器渲染（ssr）相对比，预渲染能与服务端渲染一样提高 SEO 优化，但是预渲染对配置更简单，实现成本低。弱网环境下，预渲染能更快地呈现页面内容，减少页面可见时间。

---

接下来我们实现下预渲染

1. vue-cli生成项目

# 安装 vue-cli
npm install -g vue-cli
# 初始化项目
vue init webpack rerender__test
# 安装依赖
cd rerender__test
yarn
// 安装prerender-spa-plugin
ya