如何将 React 应用加载时间缩短 70%

使用代码分割来减少 React 应用程序初始加载时间的步骤。

我们使用 React 构建大型应用。构建这些应用时，我们面临的主要问题是应用性能。随着应用规模越来越大，性能可能会下降。尤其是应用的初始加载时间会受到更大的影响。应用的初始加载速度必须足够快，不能让用户看到几秒钟的空白屏幕。因为加载时间过长会给用户留下不好的印象。

导致此问题的主要原因是将过多的组件添加到单个 bundle 文件，导致加载该文件可能需要更多时间。为了避免此类问题，我们需要以优化的方式构建组件。为了解决这个问题，React 本身提供了一个原生解决方案，即代码拆分和延迟加载。这可以将 bundle 文件拆分成更小的尺寸。

引入代码拆分的最佳位置是在路由中。基于路由的代码拆分解决了一半的问题。但大多数应用只利用了代码拆分 50% 的优势。

使用代码拆分时，我们是否正确地构建了组件？我们可以通过一些代码示例来了解原因以及如何修复它。为此，我们将使用一个包含一些 UI 组件的 React 应用示例。

在下面的截图中，我们可以看到一个仪表板组件，它有多个选项卡。每个选项卡又有多个组件。

Dashboard 组件使用基于路由的代码拆分，如下面的代码所示。

	const Dashboard = lazy(() => import('components/Dashboard'));
	const Settings = lazy(() => import('components/Settings'));
	const Configurations = lazy(() => import('components/Configurations'));

	function App() {
	return (
	<Router>
	<Layout>
	<SideBar/>
	<Layout>
	<AppHeader/>
	<Content style={{padding: '20px'}}>
	<Suspense fallback={<div>Loading...</div>}>
	<Switch>
	<Route path="/dashboard">
	<Dashboard/>
	</Route>
	<Route path="/settings">
	<Settings/>
	</Route>
	<Route path="/configuration">
	<Configurations/>
	</Route>
	</Switch>
	</Suspense>
	</Content>
	</Layout>
	</Layout>
	</Router>
	);
	}

	const Dashboard = lazy(() => import('components/Dashboard'));
	const Settings = lazy(() => import('components/Settings'));
	const Configurations = lazy(() => import('components/Configurations'));

	function App() {
	return (
	<Router>
	<Layout>
	<SideBar/>
	<Layout>
	<AppHeader/>
	<Content style={{padding: '20px'}}>
	<Suspense fallback={<div>Loading...</div>}>
	<Switch>
	<Route path="/dashboard">
	<Dashboard/>
	</Route>
	<Route path="/settings">
	<Settings/>
	</Route>
	<Route path="/configuration">
	<Configurations/>
	</Route>
	</Switch>
	</Suspense>
	</Content>
	</Layout>
	</Layout>
	</Router>
	);
	}

仪表板组件包含一些子组件，如销售、利润、图表、图块和趋势，如以下代码所示

view raw dashboard.jsx hosted with ❤ by GitHub

view raw dashboard.jsx hosted with ❤ by GitHub

我们已将代码拆分成多个路由。因此，当应用程序捆绑时，我们会为每个路由获得一个单独的构建文件，如下所示

从上图可以看出，大小为405.1 KB的文件是仪表板组件，其他文件分别是标题、侧边栏、其他组件和 CSS。

我已经将应用程序托管在Netlify中以测试其性能。由于我们在本地测试应用程序，因此无法发现任何差异。当我使用GTmetrix测试托管应用程序时，仪表板屏幕加载耗时2.9 秒，请查看下图逐帧加载的情况。

仪表板组件是此应用程序的初始页面，因此当我们点击应用程序 URL 时，405.1KB文件将与标题和侧边栏一起加载。

最初，用户只会查看“销售”选项卡，但我们的示例应用仪表板组件包含多个选项卡。因此，浏览器还会下载其他选项卡的代码，从而延迟用户的首次绘制。为了减少初始加载时间，我们需要对仪表板组件进行如下更改：

	const Sales = lazy(() => import('components/Sales'));
	const Profit = lazy(() => import('components/Profit'));
	const Chart = lazy(() => import('components/Chart'));
	const Tiles = lazy(() => import('components/Tiles'));
	const Trends = lazy(() => import('components/Trends'));

	const { TabPane } = Tabs;

	function Dashboard() {
	return (
	<Tabs defaultActiveKey="1">
	<TabPane tab="Sales" key="1">
	<Suspense fallback={<div>Loading...</div>}>
	<Sales/>
	</Suspense>
	</TabPane>
	<TabPane tab="Profit" key="2">
	<Suspense fallback={<div>Loading...</div>}>
	<Profit/>
	</Suspense>
	</TabPane>
	<TabPane tab="Chart" key="3">
	<Suspense fallback={<div>Loading...</div>}>
	<Chart/>
	</Suspense>
	</TabPane>
	<TabPane tab="Tiles" key="4">
	<Suspense fallback={<div>Loading...</div>}>
	<Tiles/>
	</Suspense>
	</TabPane>
	<TabPane tab="Trends" key="5">
	<Suspense fallback={<div>Loading...</div>}>
	<Trends/>
	</Suspense>
	</TabPane>
	</Tabs>
	);
	}

view raw .jsx hosted with ❤ by GitHub

	const Sales = lazy(() => import('components/Sales'));
	const Profit = lazy(() => import('components/Profit'));
	const Chart = lazy(() => import('components/Chart'));
	const Tiles = lazy(() => import('components/Tiles'));
	const Trends = lazy(() => import('components/Trends'));

	const { TabPane } = Tabs;

	function Dashboard() {
	return (
	<Tabs defaultActiveKey="1">
	<TabPane tab="Sales" key="1">
	<Suspense fallback={<div>Loading...</div>}>
	<Sales/>
	</Suspense>
	</TabPane>
	<TabPane tab="Profit" key="2">
	<Suspense fallback={<div>Loading...</div>}>
	<Profit/>
	</Suspense>
	</TabPane>
	<TabPane tab="Chart" key="3">
	<Suspense fallback={<div>Loading...</div>}>
	<Chart/>
	</Suspense>
	</TabPane>
	<TabPane tab="Tiles" key="4">
	<Suspense fallback={<div>Loading...</div>}>
	<Tiles/>
	</Suspense>
	</TabPane>
	<TabPane tab="Trends" key="5">
	<Suspense fallback={<div>Loading...</div>}>
	<Trends/>
	</Suspense>
	</TabPane>
	</Tabs>
	);
	}