React Loadable Components懒加载空白、Chunk加载失败如何解决

根本原因 #

该问题是部署新版本时旧静态资源被清理导致的路径不匹配：每次重新构建React应用时，懒加载对应的chunk文件名会带上新的内容hash，Firebase Hosting默认部署会覆盖旧版本构建产物，旧hash对应的chunk文件会被删除。此时停留在旧版本页面的用户触发懒加载时，浏览器会请求已经不存在的旧chunk文件，就会抛出加载错误；手动刷新后浏览器拉取到最新的入口HTML，引用的是新hash的chunk路径，错误自然消失。

可落地的解决方法 #

1. 给Loadable Components加错误自动重试/刷新逻辑 #

改造成本最低，不需要调整部署配置，直接在懒加载配置里捕获chunk加载错误，触发错误时自动重试或刷新页面拉取最新资源：

import loadable from '@loadable/component'

const loadableWithRetry = (loader, options = {}) => {
  return loadable(loader, {
    ...options,
    onError(err) {
      // 匹配chunk加载错误
      if (/Chunk.*[fail|load]/i.test(err.message)) {
        // 最多重试2次，避免偶发网络问题导致的无意义刷新
        const retryKey = `chunk_retry_${location.pathname}`
        const retryCount = Number(sessionStorage.getItem(retryKey) || 0)
        if (retryCount < 2) {
          sessionStorage.setItem(retryKey, String(retryCount + 1))
          location.reload()
        }
      }
      options.onError?.(err)
    }
  })
}

// 业务代码里替换原来的loadable调用即可
const OtherComponent = loadableWithRetry(() => import('./OtherComponent'))

function MyComponent() {
  return (
    <div>
      <OtherComponent />
    </div>
  )
}

2. 调整Firebase Hosting部署配置，保留旧版本chunk #

从部署层面彻底规避旧资源被删除的问题：

• 不要在部署新版本时全量删除历史静态产物，可配置保留最近5-10个版本的静态资源，等绝大多数用户自然刷新到新版本后再清理旧资源
• 给带hash的JS、CSS等静态资源配置响应头Cache-Control: public, max-age=31536000, immutable，这类文件内容变化时文件名hash一定会同步变化，不会出现缓存脏数据问题，同时CDN和浏览器会长期缓存对应资源，不会因为发版导致资源不可访问
• 入口index.html文件配置Cache-Control: no-cache，保证用户刷新时总能拿到最新的入口文件，引用最新的资源路径

3. 提前预加载高频懒加载组件 #

对于用户进入页面后高概率会触发的懒加载组件，可在浏览器空闲阶段提前预加载对应chunk，减少用户实际触发时才加载资源的等待时间，也能降低碰到旧资源被清理的概率：

const OtherComponent = loadableWithRetry(() => import('./OtherComponent'))
// 页面加载完成、浏览器空闲时预加载组件资源
if (typeof window !== 'undefined') {
  window.requestIdleCallback?.(() => {
    OtherComponent.preload()
  })
}

内容的提问来源于stack exchange，提问作者ololo