如何在没有 ChunkLoadError 的情况下使用 React 代码拆分和 Firebase 托管

我需要使用React 代码拆分 https://create-react-app.dev/docs/code-splitting/使用托管在 Firebase 托管上的 Create React App。

但是，我有一个问题，因为Firebase Hosting 仅托管最新版本任何应用程序的。这意味着如果您部署new应用程序版本 (N+1)，并且用户打开了现有版本 (N)，并且该用户跨越了代码分割边界，他们将请求一个旧的块 (N)，该块不再托管在 Firebase 托管中，因为当前版本已更改（N+1）。

那么，如何避免代码拆分ChunkLoadError在 Firebase 托管中？有没有办法告诉 Firebase Hosting 保留您已部署的所有先前版本，并且仅添加最新版本中的新文件（例如index.html和 JS/CSS 块？）。

我使用以下过程解决了这个问题：

1. 将每个新版本的文件推送到存储桶，例如gs://my-buck/app/releases/<git-sha>/
2. 在本地创建一个release文件夹，例如firebase_deploy/
3. 识别最后一个Ngit 历史记录中的发布标签
4. 对于每个旧版本，gsutil -m -q rsync -rc gs://my-buck/app/releases/<git-sha>/ firebase_deploy/复制old文件下来
5. 复制new发布文件rsync -rvc build/ firebase_deploy/
6. 将应用程序部署到 Firebasefirebase_deploy/， 和你的new and old块，优先考虑可能发生冲突的新块。

这个过程为我消除了 ChunkLoadErrors。

注意：使用有界N之前的版本，这样您就不会增加 Firebase 托管存储费用。如果您没有太多工件，您可以根据需要保留所有以前的版本。