如何避免React应用初始加载阶段出现短暂白屏问题

原因说明 #

你写在App组件内的黑色背景，仅在React脚本加载执行完成、组件渲染到DOM后才会生效。在React完成初始化之前，页面会默认显示HTML的白色背景，两者的时间差就会导致短暂白屏。

解决方案 #

• 首选方案：修改入口HTML的内联样式
  找到项目public目录下的index.html文件，在<head>标签中添加如下内联样式，直接给页面根元素设置黑色背景，该样式会在HTML加载完成后立刻生效，远早于React脚本执行时间，从源头上消除白屏：

<style>
  html, body, #root {
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
    background-color: black;
  }
</style>

修改后App组件内的div背景样式可以删除，避免重复设置。

• 优化补充：如果白屏持续时间较长，说明首屏资源加载速度偏慢，可配合做以下优化进一步缩短加载等待时间：
  • 开启代码分割，按需加载非首屏必要的组件和资源
  • 压缩静态资源，服务器端开启gzip/Brotli压缩
  • 对非首屏逻辑的脚本设置defer/async延迟加载

内容的提问来源于stack exchange，提问作者Bear Bile Farming is Torture