本文介绍一种优化首屏访问速度的技术:前端预渲染,并封装自定义的React hook,解决预渲染中的数据初始化问题。
一、首屏速度慢的问题
如果网站页面首屏访问比较慢,应该怎么优化呢?
这要结合实际情况,有非常多的手段可以提升首屏访问速度,今天我们来聊一聊其中一种技术:前端预渲染。
先上效果图
上面是一个前端刷题网站:灵题库(https://www.lingtiku.com,一个前端面试刷题题库,收集大厂真题)。可以看到优化之前,页面要在“题库加载中”状态停留几秒,才能获取到数据,渲染出题集列表。优化之后秒开。
灵题库的首屏展示的题集列表依赖一个列表接口,这个接口很慢(接口慢是因为API项目部署在阿里云的函数计算上,弹性实例启动有预热过程,用常驻实例又要额外付费,serverless内容后面会专门介绍),每次访问都要loading很久。怎么办呢?
因为这个首屏的列表数据不经常改动,所以我考虑可以在构建阶段就请求好数据,并渲染成静态页面,这就是前端预渲染的基本思路。
二、前端预渲染工具的原理和使用
万能的npm提供了前端预渲染工具:
- webpack插件:prerender-spa-plugin
- rollup插件:rollup-plugin-prerender-spa-plugin
灵题库网站使用的是rollup的插件。
我们先来了解下预渲染工具的原理,然后再介绍具体的用法。
预渲染工具的基本原理是:构建打包之后,插件会在本地启动express静态服务&#x