前端白屏问题_首页白屏优化实践

前言

自从前端三大框架React、Vue、Angular面世以来，前端开发逐渐趋向规范化、统一化，大多数时候新建前端项目，首先想到使用的技术一定是三大框架之一，框架给前端开发带来了极大的便利和规范，但是由于这三大框架都是JS驱动，在JS没有解析加载完成之前页面无法展示，会处于长时间的白屏，带来了一定的用户体验问题，接下来本篇文章会介绍本人最近在白屏优化时遇到的一些问题和思考

SSR

想到白屏问题，首先想到的解决方案一般都是服务端渲染，在服务端将渲染逻辑处理好，然后将处理好的HTML直接返回给前端展示，这样就可以解决白屏的问题，也可以解决seo的问题，因为不需要动态获取数据了，但是，这和我早期的写后端时的开发模式很像，前端和后端关联在了一起，不利于维护，同时，对于前端工程师来说，要求变高来，需要了解一定的后端知识，虽然有类似Nuxt.js这类的SSR框架帮我们简化了服务端的部分，但是在要做定制或是解决bug时还是无法避免要对服务端部分进行调试、维护，成本颇高，还有需要考虑的服务端渲染会增加服务器压力，要处理并发、运行速度问题等等

预渲染

这个方案是相对简单直接的一个解决办法，尝试成本也比较低，这里介绍如何用prerender-spa-plugin做预渲染，这样就可以在浏览器进行渲染，而不需要将Vue或者React代码部署到服务器上，以vue-cli3的官方demo为例做配置，看具体的配置文件：

const path = require('path')

const PrerenderSPAPlugin = require('prerender-spa-plugin')

const Renderer = PrerenderSPAPlugin.PuppeteerRenderer

module.exports = {

configureWebpack: config => {

let plugins = []

plugins.push(new PrerenderSPAPlugin({

staticDir: path.resolve(__dirname, 'dist'),

routes: ['/', '/about'],

minify: {

collapseBooleanAttributes: true,

collapseWhitespace: true,

decodeEntities: true,

keepClosingSlash: true,