Question

自2018年夏中以来，我们一直在运行此应用程序，从我们首先使用Create React App开始，现在我们使用React v16.12.0。我们使用带有正常CRA的打字稿，babel，webpack。我们有一个问题，就是每次将应用程序部署到生产环境时，更新后第一次访问该站点的用户只会收到一个黑屏，表明该应用程序已崩溃。控制台按照“意外令牌'<'”的方式声明内容。我们已经通过各种SO帖子以及其他有关错误消息的帖子专门研究了此问题，但似乎无法找到解决该问题的方法。这似乎与缓存密切相关，因为硬刷新是修复它的唯一方法（转储缓存）。在这方面似乎与create react app service worker有关。

我们尝试过：

取消注册服务人员
这导致应用程序在更新后可以正常加载，但是第一次用户尝试浏览页面（React Router）时，应用程序将崩溃。此时正常刷新将解决此问题。

下一步

我们尝试修改服务工作者文件以在更新后自动强制进行硬刷新
这也不起作用，该应用已加载，但存在异常副作用。

我们尝试将无缓存重新验证添加到我们的 index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <meta name="theme-color" content="#000000" />
    <meta
      http-equiv="Cache-Control"
      content="no-cache, no-store, must-revalidate"
    />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <title>App</title>
  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>
  </body>
</html>

index.tsx

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("root") as HTMLElement
);
registerServiceWorker();

我们尝试了代码拆分，但是那也不起作用。

React应用在新的生产版本上显示空白屏幕，直到硬刷新

0 个答案: