SPA项目首屏优化

产生原因react是单页面应用,html靠js生成,如果首屏需要加载很大的js文件(app.js),所以当网络不好的时候会有一段时间的白屏现象。解决方法优化webpack减少模块打包体积,按需加载。使用ssr服务端渲染,在服务端事先拼装好首页所需的html【对服务器资源消耗大】首页加loadi...

2024年11月8日
245字
  1. 产生原因
    react是单页面应用,html靠js生成,如果首屏需要加载很大的js文件(app.js),所以当网络不好的时候会有一段时间的白屏现象。
  2. 解决方法
    • 优化webpack减少模块打包体积,按需加载。
    • 使用ssr服务端渲染,在服务端事先拼装好首页所需的html【对服务器资源消耗大】
    • 首页加loading(正好可以是广告时间)或骨架屏
    • 使用首屏SSR+跳转SPA方式来优化。【只是在首页使用ssr】
    • 使用CDN加载资源。cdn加速原理DNS过程
    • 服务器开启gizp加速。
    • 改单页应用为多页应用。
    • 图片压缩小图标用雪碧图,优先使用webp格式。图片懒加载等等
    • 合理使用缓存。
    • 优化代码逻辑,把主要的js和次要js分开来。

文章评论区

欢迎留言交流

未登录,请先注册或登录后发表评论。

Leave comment