webpack - 如何解决 Create-React-app 项目中的 Chunk Load Error？

Question

我正在部署一个使用 CRA(Create-React-App) 生成的项目，所有 babel 和 webpack 配置都保持不变。

此外，我正在使用 AWS S3 的静态存储桶托管功能部署我的 React 应用程序。

问题是，由于没有包含服务器，每次部署新文件时，都会创建具有随机哈希值的新 block 。

当客户端在具有旧哈希的网站上部署新哈希时，客户端会出现 block 加载错误。

为了演示这一点，使用 yarn build 构建项目并转到 /build 文件夹以查看 webpack 生成的 block 。然后使用 serve，我可以演示我的部署在我的本地机器上的表现。

执行 yarn serve 后，转到提供构建文件的适当本地主机。

然后，在 /build/static/js 文件夹中，根据需要重命名每个 block 文件的哈希值。

不要管浏览器，重启 yarn serve，它将提供重命名的 block 文件。

然后回到浏览器，你很可能会得到两个错误:

Uncaught SyntaxError: Unexpected token '<'

Loading Chunk n failed.(missing: ~~)

我认为可以解决这个问题的方法是在发生ChunkLoadError 时HARD reload 网页。遗憾的是，window.reload(boolean) 函数已被弃用，仅执行 window.location.reload() 并不能解决这个问题。

+) 附言。我在某些代码中使用 React.Lazy() 实现了代码拆分。

Answer 1

您提出的解决方案必须有效:

您所要做的就是将这 2 个元标记添加到您的 index.html 中:

<meta http-equiv="Pragma" content="no-cache"/>
<meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate"/>

这将阻止浏览器在刷新页面时使用缓存

其次，使用ErrorBoundary react 的组成部分放置您的刷新逻辑

例如:

import React from "react";

const PageHasBeenForceRefreshed = "page-has-been-force-refreshed";

const retryPageLoading = () => {
  const pageHasAlreadyBeenForceRefreshed = JSON.parse(
    window.localStorage.getItem(PageHasBeenForceRefreshed) || "false"
  ) as boolean;

  if (!pageHasAlreadyBeenForceRefreshed) {
    window.localStorage.setItem(PageHasBeenForceRefreshed, "true");
    return window.location.reload();
  } else {
    window.localStorage.setItem(PageHasBeenForceRefreshed, "false");
  }
};

interface ErrorBoundaryProps {
  children: React.ReactNode;
}
export class ErrorBoundary extends React.Component<ErrorBoundaryProps, { hasError: boolean }> {
  constructor(props: Readonly<ErrorBoundaryProps>) {
    super(props);
    this.state = { hasError: false };
  }
  componentDidCatch(error: unknown, info: unknown) {
    retryPageLoading();
    this.setState({ hasError: true });
    console.log(error, info);
  }
  render() {
    if (this.state.hasError) {
      return <>Your error component</>;
    }
    return this.props.children;
  }
}

当 index.html 中缺少一个 block 时，错误边界将捕获错误并运行函数“retryPageLoading()”。函数“retryPageLoading()”使用本地存储来避免无限循环。当发生错误并且页面没有刷新时，刷新是通过“window.location.reload()”完成的

最后，将您的 React 应用包装在 ErrorBoundary 中，以便在丢失时捕获 block 错误

import * as React from "react";
import { ErrorBoundary } from "./components/ErrorBoundary/ErrorBoundary";

const App: React.FunctionComponent = () => {
  return <ErrorBoundary>Your app</ErrorBoundary>;
};

告诉我它是否有效。祝你好运