本文介绍了Vue预渲染的概念，旨在优化页面加载速度，减少SPA应用的白屏时间。通过prerender-spa-plugin插件，利用puppeteer库在构建时生成静态HTML，实现预渲染。文章详细讲解了插件的工作流程，并提供了在项目中集成和配置prerender-spa-plugin的步骤，最终展示预渲染效果。
前言:这几天一直看怎么样优化页面加载速度,一个页面的加载等待时间很长的话,确实很不友好,反正如果是app的话,我会直接卸载的,所以各个厂商为了能让用户尽快的看到页面内容做了一系列的操作(预渲染、ssr、同构等等),我们今天来看一下预渲染.
什么是预渲染?
为什么需要用预加载呢?
以一个vue的spa(单页面)应用为例,我们用打包工具打包完毕后,我们的页面大概是这样的:
然后我们运行下页面后:
我们加载页面的时候,浏览器的渲染包含:html的解析、dom树的构建、cssom构建、javascript解析、布局、绘制,以上面例子看来,当解析到javascript的时候才回去触发vue的渲染,然后元素挂载到id为app的div上,这个时候我们才能看到我们页面的内容,所以即使vue渲染机制很快我们仍然能够看到一段时间的白屏情况,我们当然希望是加载页面的时候就可以看到内容了,而无需等待长时间的渲染,为了解决spa应用出现的白屏情况,我们需要在加载js之前做一下页面的预渲染,这样用户就能尽可能快的看到页面内容.
github上已经有一些预渲染框架了,原理都差不多,我这里就以prerender-spa-plugin为例了,我们来一步一步解析一下.
先看一下官网的解释:
This is the stable 3.x version of prerender-spa-plugin based on puppeteer. If you’re looking f
最低0.47元/天 解锁文章
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
