如何通过CDN自动提供过期bundle，解决React/Webpack版本更新资源丢失问题

对应专业术语 #

该功能对应的通用行业术语是 静态资源版本化降级加载，属于「不可变静态资源部署策略」的核心配套机制，主要解决版本迭代过程中旧版本客户端请求过期分包资源的问题。

实现方案 #

前提准备 #

先确保Webpack打包配置开启了content hash命名规则，所有bundle的文件名会基于文件内容生成唯一hash后缀（例如A.3f2d19.js、B.a7c924.js），确保所有历史版本的bundle文件名唯一不冲突，这是后续方案的基础。

方案1：服务端路由重定向（推荐，用户完全无感知） #

在你主站的反向代理服务（比如Nginx）中配置静态资源404回退规则，主站本地找不到请求的bundle时，直接重定向到存储了全版本资源的CDN即可，示例配置如下：

location ~* ^/static/(js|css)/.*\.(js|css)$ {
  root /当前部署版本的静态资源根目录;
  # 本地不存在的资源直接302跳转到CDN
  error_page 404 =302 https://cdn.myapp.com$request_uri;
}

方案2：前端错误捕获兜底 #

如果没有服务端配置权限，可以在前端对动态导入逻辑做全局封装，捕获分包加载错误（ChunkLoadError）后自动切换到CDN地址加载资源，示例代码如下：

// 动态导入兜底封装
const lazyLoad = (importFunc) => {
  return React.lazy(() => 
    importFunc().catch((err) => {
      // 匹配chunk加载错误场景
      if (err.name === 'ChunkLoadError') {
        // 提取资源路径，替换为CDN前缀后重新加载
        const resourcePath = err.message.match(/\/(static\/.*\.(js|css))/)[1]
        return import(`https://cdn.myapp.com/${resourcePath}`)
      }
      throw err
    })
  )
}

// 业务代码直接使用封装后的方法即可
const PageB = lazyLoad(() => import('./pages/B'))

可选优化 #

如果需要更清晰的版本管理，可以在打包时给每个构建版本生成唯一版本号，所有资源都放到对应版本号的目录下（例如cdn.myapp.com/v1.2.3/A.js），进一步降低资源匹配错误的概率。

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