在 create-react-app 中使用 @loadable/component 时如何避免 ChunkLoadError？

Question

使用 React.lazy 时可以使用此问题的解决方案：

• https://www.codemzy.com/blog/fix-chunkloaderror-react
• https://raphael-leger.medium.com/react-webpack-chunkloaderror-loading-chunk-x-failed-ac385bd110e0

但是我们正在使用

@loadable/component

并且不太清楚我们如何在使用此模块时解决这些 ChunkLoadError。我们最近才开始在我们的应用程序中进行代码拆分，这些错误带来的头痛已经抵消了我们的 Web 应用程序获得的任何性能提升。

我们如何在使用

@loadable/component

时防止ChunkLoadError？

Answer 1

我们首先使用

@loadable/component

的原因是

.preload()

函数。但是，在我们解决这个 ChunkLoadError 问题之前，我们将停止使用

@loadable/component

。

我们已经安装了 https://www.npmjs.com/package/react-lazy-with-preload 并遵循上面 medium 帖子中的确切解决方案，除了我们使用

lazyWithPreload

而不是

lazy

在

lazyWithRetry

函数中。

然后我们可以在我们的 App.js 文件中加载组件：

const ShotChartsApp = lazyWithRetry(() => import(/* webpackChunkName: "ShotChartsApp" */ './containers/AppPages/ShotChartsApp'));

function App() {
    ...
    // Load the lazy-loaded components
    useEffect(() => {
        ShotChartsApp.preload();
    }, []);
}

我希望这个解决方案可以处理所有 3 个：

• 有代码拆分，所以第一页加载很快
• 预加载组件，这样用户在访问组件时无需等待组件加载
• 没有

  LoadChunkErrors

祈祷这行得通...