第 78 期(技巧)：如何优化SPA首屏加载

[wingmeng]

这是一道高频面试题。
在 SPA 中，页面的渲染都是依赖 JavaScript 生成的，通常这些 js 文件的体积会很大，在首屏加载时，加载和执行这些 js 文件需要一定的时间，而且页面越大，加载和执行的时间就越长，所以容易产生“白屏”现象。

如何优化 SPA 首屏加载？

• 治标

  1. 首屏加 loading 效果；
  2. 上骨架屏（在页面还没有完成加载之前，显示页面的大致结构）。

• 治本

  1. 使用首屏 SSR（服务端渲染）+ 跳转 SPA 方式；
  2. 优化 webpack 打包策略，合理分包，减少模块打包体积，动态 import 按需加载；
  3. 使用 CDN 进行资源的“动静分离”，减少一些不必要的打包体积和损耗；
  4. 处理加载的时间片，合理安排加载顺序；
  5. 合理利用浏览器本地缓存（含 serviceWorker）；
  6. 使用 prefetch 技术；
  7. 服务端开启 gzip 压缩。