vue预加载动态生成runtime.js_预渲染 prerender-spa-plugin 避坑指南

预渲染原理

在webpack打包结束并生成文件后（after-emit hook），会启动一个server模拟网站的运行，用puppeteer（google官方的headless 无头浏览器浏览器）访问指定的页面route，得到相应的html结构，并将结果输出到指定目录，过程类似于爬虫。

预渲染应用场景：

seo优化 对于一些动态数据利用enderAfterTime也可以进行预渲染出来。当动态数据渲染出来之后，客户端代码比如bundle.js会立马接管dom操作。对于spa优化可谓是非常方便。

对于meta头的seo优化会结合vue-meta-info插件来优化 https://mp.weixin.qq.com/s/lM808MxUu6tp8zU8SBu3sg

骨架屏。 两种思路：

把骨架屏当做预渲染页面，当ajax获取到数据之后再把骨架屏替换掉
prerender-spa-plugin提供了postProcessHtml钩子

 postProcessHtml: function (context) {var titles = {'/': '首页','/about': '关于','/contact': '链接'}return context.html.replace(/<title>[^<]*</title>/i,'<title>' + titles[context.route] + '</title>')}

此钩子会返回转义之后的静态页面，配置好的路由都会走此回调，对于动态生成骨架屏，这也是一种思路,转义之后的字符处理起来比较麻烦(有待考究)

预渲染不适用经常变化的数据，比如说股票代码网站，天气预报网站。因为此时的数据是动态的，而预渲染时已经生成好了dom节点。如果要兼容seo可以使用SSR。预渲染不适用大量的路由页面,比如成千上百个路由，此时打包后预渲染将会非常慢。预渲染最好的应用场景是需要seo的活动页面，配合vue-meta-info插件优化meta标签，开箱即用。

如何把异步数据渲染成静态页面

三种方案

plugin中设置renderAfterTime：5000 //触发渲染的时间，用于获取数据后再保存渲染结果
plugin中设置

renderAfterDocumentEvent: 'render-event'

根组件中设置

new Vue({el: '#app',mounted () {setTimeout(() => {document.dispatchEvent(new Event('render-event'))}, 5000)}
})

注意不是在根组件中设置此事件无效（比如你想在ajax获取之后再再派发事件，此时并不会触发预渲染）

plugin中设置

renderAfterElementExists: 'my-app-element'

会等待dom节点class为my-app-element生成功之后再进行预渲染

生成的路由跳转新页面

   <router-link to="/about" target="_blank" >About</router-link>

如何处理某些节点是否需要预渲染

plugin中配置

  renderer: new Renderer({renderAfterTime: 5000,injectProperty: '__PRERENDER_INJECTED',inject: {foo: 'bar'}})

页面中使用

  setTimeout(() => {if (window['__PRERENDER_INJECTED']) {return}this.data = '我是异步渲染出来的数据'}, 3000)
}

预渲染会在5秒后完成并且不会对data数据进行预渲染

prerender-spa-plugin的一些坑

路由生成对应的页面(.html)时某些数据没有被渲染出来

在根组件上添加data-server-rendered ='true'

  <div id="app" data-server-rendered="true"></>

直接访问某个为.html文件的后缀时只能渲染出静态页面，不会渲染到对应的路由。

style加载了2次官方bug并未解决

刷新总是会闪一下首页

这个是服务端渲染后,样式文件没跟上导致的,css要提取成一个文件就好了,了解一下这个plugin ExtractTextPlugin

配置不生成文件夹，值生成html文件时

  postProcess (renderedRoute) {// 重点// Remove /index.html from the output path if the dir name ends with a .html file extension.// For example: /dist/dir/special.html/index.html -> /dist/dir/special.htmlif (renderedRoute.route.endsWith('.html')) {renderedRoute.outputPath = path.join(__dirname,'dist',renderedRoute.route)}return renderedRoute}

打包之后会报错解决办法：去掉data-server-rendered="true" 但是此时又会出现路由对应的路由无法渲染的问题。无解。