Firebase Hosting与React懒加载问题：无法访问特定JS Chunk版本

问题核心 #

部署React应用新版本到Firebase Hosting后，正在使用旧版本的用户触发懒加载时，请求旧版本的Chunk（如checkout.1.js）会返回index.html而非目标JS文件；回滚到旧版本后，新版本的Chunk同样无法访问。这是因为SPA的rewrite规则会在资源不存在时重定向到首页，且Firebase部署/回滚会替换文件，导致旧Chunk被删除。

原因分析 #

1. 文件替换机制：Firebase Hosting部署新版本时会覆盖旧文件，回滚操作则替换为指定旧版本的文件，导致非当前版本的Chunk不存在。
2. SPA重定向规则：当请求的Chunk文件不存在时，会触发"source": "**"的rewrite规则，返回index.html。
3. 缓存策略缺失：未对Chunk设置长期缓存，用户无法从本地缓存获取旧版本资源。

解决方案 #

1. 修改构建配置，保留历史Chunk #

确保React构建时不删除旧的Chunk文件，将新Chunk追加到输出目录：

• 若直接使用Webpack配置，修改webpack.config.js：

module.exports = {
  output: {
    filename: '[name].[contenthash].js',
    chunkFilename: '[name].[contenthash].js',
    clean: false, // 禁用dist目录清理，保留旧文件
  },
};

• 若使用Create React App，通过customize-cra修改配置：
  安装依赖：npm install customize-cra react-app-rewired --save-dev
  创建config-overrides.js：

const { override, adjustWebpackConfig } = require('customize-cra');

module.exports = override(
  adjustWebpackConfig((config) => {
    config.output.clean = false;
    return config;
  })
);

修改package.json的构建脚本：

"scripts": {
  "build": "react-app-rewired build",
}

2. 优化Firebase Hosting配置 #

在firebase.json中添加缓存策略，确保Chunk长期缓存，同时强制index.html每次请求最新版本：

{
  "hosting": {
    "public": "dist",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "rewrites": [
      {
        "source": "/assets/**",
        "destination": "/assets/**"
      },
      {
        "source": "**",
        "destination": "/index.html"
      }
    ],
    "headers": [
      {
        "source": "/assets/**",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "public, max-age=31536000, immutable"
          }
        ]
      },
      {
        "source": "/index.html",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "no-cache, no-store, must-revalidate"
          }
        ]
      }
    ]
  },
  // 其他原有配置...
}

3. 部署时上传所有文件 #

每次部署时，Firebase CLI默认会上传public目录下的所有文件，只要构建时保留了旧Chunk，部署后所有历史Chunk都会存在于Hosting中，确保不同版本的资源都能被访问到。

效果验证 #

• 部署新版本后，旧版本用户的页面触发懒加载时，会从本地缓存获取旧Chunk（若缓存未过期），或直接请求到Hosting上保留的旧Chunk文件。
• 用户刷新页面后，会获取最新的index.html，进而加载新版本的Chunk。
• 回滚旧版本后，新版本的Chunk依然存在，不会影响已加载新版本页面的用户。

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