前端性能优化 之 首屏预渲染

本文介绍一种优化首屏访问速度的技术：前端预渲染，并封装自定义的React hook，解决预渲染中的数据初始化问题。

一、首屏速度慢的问题

如果网站页面首屏访问比较慢，应该怎么优化呢？

这要结合实际情况，有非常多的手段可以提升首屏访问速度，今天我们来聊一聊其中一种技术：前端预渲染。

先上效果图

上面是一个前端刷题网站：灵题库（https://www.lingtiku.com，一个前端面试刷题题库，收集大厂真题）。可以看到优化之前，页面要在“题库加载中”状态停留几秒，才能获取到数据，渲染出题集列表。优化之后秒开。

灵题库的首屏展示的题集列表依赖一个列表接口，这个接口很慢（接口慢是因为API项目部署在阿里云的函数计算上，弹性实例启动有预热过程，用常驻实例又要额外付费，serverless内容后面会专门介绍），每次访问都要loading很久。怎么办呢？

因为这个首屏的列表数据不经常改动，所以我考虑可以在构建阶段就请求好数据，并渲染成静态页面，这就是前端预渲染的基本思路。

二、前端预渲染工具的原理和使用

万能的npm提供了前端预渲染工具：

• webpack插件：prerender-spa-plugin
• rollup插件：rollup-plugin-prerender-spa-plugin

灵题库网站使用的是rollup的插件。

我们先来了解下预渲染工具的原理，然后再介绍具体的用法。

预渲染工具的基本原理是：构建打包之后，插件会在本地启动express静态服务，serve打包好的静态资源。然后再启动一个无头浏览器&#