Webpack 代码拆分：ChunkLoadError - 加载块 X 失败，但块存在

Question

几天前我已将 Sentry 与我的网站集成，我注意到有时用户会在其控制台中收到此错误：

ChunkLoadError: Loading chunk <CHUNK_NAME> failed.
(error: <WEBSITE_PATH>/<CHUNK_NAME>-<CHUNK_HASH>.js)

所以我在网上调查了这个问题，发现了一些类似的案例，但与会话期间的发布更新或缓存问题导致的块丢失有关。

这些情况和我的主要区别在于失败的块实际上可以从浏览器访问，因此加载错误不取决于块哈希的发布后刷新，而是 （我猜） em>，来自一些与网络相关的问题。 此统计数据强化了这一假设：所涉及的设备中约有 90% 是移动设备。

最后，我提出了一个问题：我是否应该以某种方式解决问题（例如，如果失败则重试块加载） 还是最好直接忽略它并让用户手动刷新？

---

2021.09.28 编辑：

一个月后，问题仍然存在，但我没有收到用户的任何报告，而且我一直在用 Hotjar 记录用户会话，但到目前为止没有发现任何相关内容。

我最近与 Sentry 支持人员聊天，帮助我排除了与网络相关的假设：

我们的 React SDK 默认没有离线缓存，当捕获到错误时，它将在那个时候发送。如果应用无法连接到 Sentry 发送事件，该事件将被丢弃，SDK 将不再尝试发送。

来自哨兵的鲁道夫

我可以确认这个问题很不寻常，我与您分享另一个有趣的统计数据：自第一次出现以来受影响的用户是 332.227 名唯一访问者中的 882 名 (~0.26%)，但我注意到 90% 的事件来自 iOS（不是我一个月前注意到的通用移动设备），所以如果我计算与 iOS 用户相同的比例（794（882 的 90% ）在 128.444 中）我们接近 0.62%。仍然很小，但在 iOS 上肯定更相关。

Answer 1

这很可能发生，因为浏览器正在缓存您应用的主 HTML 文件，例如为 webpack 包和 ma​​nifest 提供服务的index.html。

首先，我会确保您的 Web 服务器发送正确的 HTTP 响应标头以不缓存应用程序的 index.html 文件（假设它被称为该文件）。如果您使用的是 NGINX，您可以像这样设置适当的标头：

location ~* ^.+.html$ {
  add_header Cache-Control "no-store max-age=0";
}

对于 SPA，此文件的大小应该相对较小，因此只要您缓存应用程序所需的所有其他资产（如 JS 和 CSS 等），就可以不缓存它。您应该使用内容您的 JS 捆绑包上的哈希以支持对这些捆绑包的缓存破坏。有了这些，对您网站的访问应该始终包含最新版本的 index.html 以及最新资产，包括记录块名称的最新 webpack 清单。

如果你想处理块加载错误，你可以这样设置：

import { ErrorBoundary } from '@sentry/react'

const App = (children) => {
  <ErrorBoundary
    fallback={({ error, resetError }) => {
      if (/ChunkLoadError/.test(error.name)) {
        // If this happens during a release you can show a new version alert
        return <NewVersionAlert />

        // If you are certain the chunk is on your web server or CDN
        // You can try reloading the page, but be careful of recursion
        // In case the chunk really is not available
        if (!localStorage.getItem('chunkErrorPageReloaded')) {
          localStorage.setItem('chunkErrorPageReloaded', true)
          window.location.reload()
        }
      }

      return <ExceptionRedirect resetError={resetError} />
  }}>
    {children}
  </ErrorBoundary>
}

如果您决定重新加载页面，我会事先向用户显示一条消息。