Firebase 托管和 React 延迟加载问题：无法访问特定的 JS 块版本

Question

Context：我在 Firebase Hosting 和 React 方面遇到了一个重大问题，特别是与延迟加载的块相关。部署新版本后，尝试访问特定 JS 块（例如 checkout.2.js）的用户将被重定向到我的 React Router，而不是获取请求的 JS 版本。这种行为带来了挑战，尤其是对于延迟加载的 React 组件。

塞纳里奥：

• 使用 React 组件的客户端延迟加载。
• Firebase 托管，域名如 eg.web.app。
• 延迟加载的结帐页面，其块名称如 checkout.[hash].js。

我正在使用 React 和 Firebase 托管的客户端延迟加载。

例如，假设我延迟加载了结帐页面，我的块名称是 checkout.[hash].js，我的 firebase 域是 eg.web.app。他们可以访问这个结账块，例如 web.app/asserts/checkout.[hash].js

我已经部署了 v1 并且 checkout 块看起来像这个 checkout.1.js 并且一些用户正在浏览目录页面。同时有一个更新，结帐块是 chekcout.2.js。

现在，当用户单击结帐按钮时，他们希望看到 checkout.1.js。但是，它会下载我的主 index.html 页面，并将其配置为 SPA。

预期结果:

无论部署版本如何，我都想访问两个版本的结账断言，例如 xyz.web.app/assets/checkout.1.js 或 xyz.web.app/assets/checkout.2.js

重现步骤：

• 部署两个版本。
• 在新选项卡中打开 JS chunk。
• 回滚到旧版本的 Firebase。
• 等待回滚。
• 强制刷新旧的 JS 块，它将加载index.html

这是我的 firebase.json

{
  "firestore": {
    "rules": "firestore.rules",
    "indexes": "firestore.indexes.json"
  },
  "functions": {
    "predeploy": ["npm --prefix \"$RESOURCE_DIR\" run build"]
  },
  "hosting": {
    "public": "dist",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "rewrites": [
      {
        "source": "/assets/**",
        "destination": "/assets/**"
      },
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  },
  "storage": {
    "rules": "storage.rules"
  },
  "emulators": {
    "auth": {
      "port": 9099
    },
    "functions": {
      "port": 5001
    },
    "firestore": {
      "port": 8080
    },
    "hosting": {
      "port": 5002
    },
    "pubsub": {
      "port": 8085
    },
    "storage": {
      "port": 9199
    },
    "ui": {
      "enabled": true,
      "port": 4001
    }
  }
}

Answer 1

我不确定您认为 Firebase 托管（或任何网络服务）在这种情况下可以做什么？您的代码要求从 Web 服务中获取不再存在于 Web 服务上的文件。

您可以在代码中考虑的一件事是，对服务器上的

version file

进行某种类型的定期检查，该检查会随着应用程序构建的每个新版本而变化。您的 React 应用程序会定期检查编译/部署的“版本文件”是否存在，如果不存在，您的代码将强制刷新整个应用程序，从而加载新部署的应用程序版本。