Ajax技术的出现，让我们的Web应用能够在不刷新的状态下显示不同页面的内容，这就是单页应用。在一个单页应用中，往往只有一个html文件，然后根据访问的url来匹配对应的路由脚本，动态地渲染页面内容。单页应用在优化了用户体验的同时，也给我们带来了许多问题，例如SEO不友好、首屏可见时间过长等。服务端渲染（SSR）和预渲染（Prerender）技术正是为解决这些问题而生的。
阅读本文，你能够了解到什么是预渲染、预渲染与服务端渲染的异同以及预渲染在Vue.js项目中的使用。
服务端渲染与预渲染一些概念客户端渲染：用户访问url，请求html文件，前端根据路由动态渲染页面内容。关键链路较长，有一定的白屏时间；
服务端渲染：用户访问url，服务端根据访问路径请求所需数据，拼接成html字符串，返回给前端。前端接收到html时已有部分内容；
预渲染：构建阶段生成匹配预渲染路径的html文件（注意：每个需要预渲染的路由都有一个对应的html）。构建出来的html文件已有部分内容。
下图简单展示了客户端渲染、服务端渲染和预渲染的请求流程。
本文示例使用vue-cli生成，点击这里查看示例。dist目录是启用了预渲染的打包目录，dist2目录则是普通客户端渲染的打包目录。通过对比目录中的文件，你可以对预渲染有个初步的了解。若你还是不知道什么是预渲染，不妨先通读全文。
共同点针对单页应用，服务端渲染和预渲染共同解决的问题：
SEO：单页应用的网站内容是根据当前路径动态渲染的，html文件中往往没有内容，网络爬虫不会等到页面脚本执行完再抓取；
弱网环境：当用户在一个弱环境中访问你的站点时，你会想要尽可能快的将内容呈现给他们。甚至是在js脚本被加载和解析前；
低版本浏览器：用户的浏览器可能不支持你使用的js特性，预渲染或服务端渲染能够让用户至少能够看到首屏的内容，而不是一个空白的网页。
预渲染能与服务端渲染一样提高SEO优化，但前者比后者需要更少的配置，实现成本低。弱网环境下，预渲染能更快地呈现页面内容，减少页面可见时间。
不适合的场景那什么场景下不适合使用预渲染呢：
个性化内容：对于路由是/my-profile的页面来说，预渲染就失效了。因为页面内容依据看它的人而显得不同；
经常变化的内容：如果你预渲染一个游戏排行榜，这个排行榜会随着新的玩家记录而更新，预渲染会让你的页面显示不正确直到脚本加载完成并替换成新的数据。这是一个不好的用户体验；
成千上万的路由：不建议预渲染非常多的路由，因为这会严重拖慢你的构建进程。
PrerenderSPAPluginprerender-spa-plugin是一个webpack插件用于在单页应用中预渲染静态html内容。因此，该插件限定了你的单页应用必须使用webpack构建，且它是框架无关的，无论你是使用React或Vue甚至不使用框架，都能用来进行预渲染。本文示例基于Vue.js2.0+vue-router。
下文会从生成项目讲起，然后看下没有配置预渲染前的样子，再配置预渲染进行构建，对比前后的差别。
生成项目首先生成一个项目并安装依赖。
vueinitwebpackvue-prerender-democdvue-prerender-demonpminstall复制代码
组件开发过程我们不