代码拆分的合理大小/数量级是多少

Question

我们没有使用大型 React 代码库，而是希望使用 react-loadable 将应用程序拆分成更小的块。

我的队友目前正在努力使每个组件都可以延迟加载。我不认为这是正确的方法，因为延迟加载也会带来一些开销，所以我更喜欢延迟加载更大的构建块，比如整个页面。

我找到了很多关于如何使用延迟加载的内容，但是我没有找到太多关于使用延迟加载是否有意义的信息。

一种方法应该如何在 React 中进行延迟加载（通常/作为开始）？确定延迟加载对组件是否有意义的好方法是什么？

Answer 1

这是一个有趣的问题，正如 tdelaney 所说，这是非常基于意见的，它取决于您的团队正在处理的应用程序类型。

为什么不以惰性方式加载所有内容？

我想知道为什么不延迟加载所有内容。

恕我直言，以懒惰的方式加载每个组件并不是那么有利。您的应用程序可能会因为显示太多 spinners/loader 动画而让用户感到无聊。

此外：

编写和维护代码的复杂性显着增加。这是因为对于每个组件，您必须同时管理“加载”（参见下面代码段中的 Suspense）以及“已加载”状态和外观。
您的性能可能会受到许多浏览器重新paint大区域的影响。

我会如何处理这个问题

就我而言，我开始从用户的角度审视场景，以改善用户体验并减少“冻结”时间。

例如，我希望我的 Web 应用程序（嵌入在零售亭中，但也可用于移动设备）的用户快速uickly 显示 SplashScreen 然后分别加载每个块。在显示 SplashScreen 之后，我的目的是显示 App 组件，其中只有 child 的“ui 骨架”组件，而这些（children 的 App 组件）正在加载它们的嵌套 child。这让我的应用程序看起来很现代而且非常快。然后，非 visible/nested 页面的许多组件可以在用户交互后显示，当单击按钮、打开模式等时......这样它就获得了几秒钟。

总结一下：

渲染启动画面
延迟加载和呈现应用程序
- 渲染可见组件的骨架
- 延迟加载和渲染可见组件
  - 渲染child渲染

以下是我目前在一个quite大项目中实现的索引文件：

import React,{ lazy, Suspense, FC } from 'react';
import { createRoot } from 'react-dom/client';

import SplashScreen from "./SplashScreen";
const App = lazy(() => import('./App'));

const Application: FC = () => {
  console.log("Rendering <Application/>");

  return (<Suspense fallback={<SplashScreen/>}><App /></Suspense>);
}

const appRoot = createRoot(document.getElementById('app-container'));
appRoot.render(<Application />);

有关详细信息，请参阅 Code-Splitting 部分 React.lazy and Critical rendering path。

希望对您有所帮助。

代码拆分的合理大小/数量级是多少

What is a reasonable size / order of magnitude for code splitting

reactjs

performance

react-loadable