为了账号安全,请及时绑定邮箱和手机立即绑定

vue全家桶之预渲染

2018.09.14 16:06 1829浏览

简介

使用SSR确实对原来的代码侵入性太大了,因此在使用SSR之前,还是想更好的了解下Prerender的用法,这样才能在实际应用场景中,做出最合适的选择。

技术栈

  • vue: 2.x
  • webpack: 4.x
  • prerender-spa-plugin: 3.x
  • vur-router: 3.x
    demo

原理

其实在安装prerender-spa-plugin的时候,就能猜到大概的原理,因为你会发现,他依赖于Chrome的puppeteer,
后来会发现,这才是学习Prerender-Spa-Plugin最大的困难,因为如果没有翻墙,安装100多M的Chromium会很麻烦,关于这个安装,网上会有很多相关文章结束。

回到正题,虽然没有看过源码,但是直观的感觉,就是这个plugin会像个爬虫一样,在本地把你指定要预渲染的路由,都跑一遍,再把内容存到指定的输出目录。

使用

强调一下,这里使用的prerender-spa-plugin是3.x版本的,网上搜到的很多都是2.x的。

基本用法

如果是纯静态页面(没有异步获取数据逻辑时,仅仅只需要在webpack.config中使用prerender-spa-plugin插件,并设置staticDirroutes这两个属性值即可。
顾名思义这两个属性一个是指打包出来的静态文件的目录,另一个是希望预渲染的路由。如下图所示。
另外,如果要使用预渲染,路由的mode必须是history

图片描述

存在异步加载数据

想要在预渲染阶段,把异步获取的数据渲染出来,官方给了两个方案。

  1. 使用renderAfterTime属性
    顾名思义,让爬虫等一段时间之后触发。

  2. 使用renderAfterDocumentEvent
    在某个DocumentEvent事件之后触发

官方给的demo中,就是在每个要预渲染的页面中,在异步数据获取到之后,手动派发一个事件,比如:document.dispatchEvent(new Event('render-event')),
但是,我在使用这个方法的时候,始终获取不到异步数据,欢迎指出问题。 :smile:

在这个demo中,最终使用的方案是renderAfterTime: 5000,也就是在等待5s之后再把渲染结果保存。

headless

至于headless这个选项其实无关痛痒,因为puppeteer默认是以headless(无头)模式执行的,但是也可以以Chromium的模式执行。

小结

其实在学习的过程中,也很不顺利,异步数据一直无法渲染出来,也提了Issue,
后来发现根本原因是PrerenderSpaPlugin的属性设错了,应该是renderer,但是却写成了render(我也不记得在哪里copy来的了)
在找原因的过程中,也看了其他人提的issue,包括好心人也提出了各种解决方案,比如在根节点添加data-server-rendered="true"属性,renderAfterTimerenderAfterDocumentEvent二选一只保留一个,等等。

虽然最终没有解决我的问题,但是还是有很大的参考价值。

点击查看更多内容

本文原创发布于慕课网 ,转载请注明出处,谢谢合作

0人点赞

若觉得本文不错,就分享一下吧!

评论

相关文章推荐

正在加载中
意见反馈 去赚学费 帮助中心 APP下载
官方微信

举报

0/150
提交
取消