react首页白屏优化

面试

1. 产生原因
   react是单页面应用，html靠js生成，如果首屏需要加载很大的js文件(app.js)，所以当网络不好的时候会有一段时间的白屏现象。

2. 解决方法

   • 优化webpack减少模块打包体积，按需加载。
   • 使用ssr服务端渲染，在服务端事先拼装好首页所需的html【对服务器资源消耗大】
   • 首页加loading（正好可以是广告时间）或骨架屏
   • 使用首屏SSR+跳转SPA方式来优化。【只是在首页使用ssr】
   • 使用CDN加载资源。cdn加速原理DNS过程
   • 服务器开启gizp加速。
   • 改单页应用为多页应用。
   • 图片压缩小图标用雪碧图，优先使用webp格式。图片懒加载等等
   • 合理使用缓存。
   • 优化代码逻辑，把主要的js和次要js分开来。