osaet/content/posts/react-frontend-load-optimization.md

id	slug	title	summary	status	tags	cover	version	slug_source	slug_locked	published_at	created_at	updated_at
b93ebdad-9537-4e8b-a8c0-c2ba08f34307	react-frontend-load-optimization	React 前端加载优化		published			1	manual	true	2022-10-11T18:13:47+08:00	2022-10-11T18:13:47+08:00	2026-01-07T18:10:36+08:00

主要问题

这次的 December 项目采用的是前后端分离的技术，交互使用的是 Axios ，但目前遇到的问题是，首次加载网站的时间过于久了，根据 report 的分析，我认为可能存在的问题是 react-router-dom 一次性加载了所有的组件，导致了加载变慢。

所以，主要的解决策略集中在对 router 的懒加载上，让它分批次地加载组件。

当然我还怀疑 React-Mui 组件库也拖慢了网站的加载，毕竟它是有些大的，但是应该还好，毕竟加载时是分开导入的，先解决 Router 的问题吧

解决方案

导入 lazy,Suspense 包

import { lazy,Suspense } from 'react';

lazy 用于懒加载 ， Suspense 用于加载 loading

const MyComponent = lazy(() => import('./MyComponent'))

<Suspense fallback={<div>Loading...</div>}>
	<RouterProvider router={router} />
</Suspense>