前端性能优化 之 数据预下载

一、前端预渲染的局限

我们知道前端预渲染的原理是：构建打包之后，插件会在本地启动express静态服务，serve打包好的静态资源。然后再启动一个无头浏览器（例如Puppeteer），浏览器从服务器请求网页，网页运行时候会请求首屏接口，用拿到的数据渲染出包含内容的首屏后，无头浏览器截屏并替换掉原来的html。

但是在单页应用中存在一个问题，前端路由切换时候，还是会请求接口，而不会加载预渲染好的html，例如预渲染index.html和about.html，但是从index.html跳转about.html时候，如果是前端路由，不会从服务器请求about.html，而是加载about组件，那还是会请求接口，从而可能带来界面渲染慢的情况。

二、解决方案：数据预下载

怎么解决这个问题呢？

在优化灵题库（https://www.lingtiku.com）页面加载时候，我想到一个简单的办法，就是仿照前端预渲染的思路，在构建阶段就把一些数据预下载，下载之后保存在一个json文件里，json文件放到前端静态资源目录中。然后前端发起请求时候，用axios拦截预下载的请求，改成请求静态的json数据。

</