yarnom
f0b50d13ea
Add Go/Postgres admin APIs, Angular admin UI, manual build flow, asset uploads, markdown import/export, configurable slug generation, and the Yar reading theme. Exclude local docs and generated development artifacts from version control.
36 lines
1.2 KiB
Markdown
36 lines
1.2 KiB
Markdown
---
|
||
id: b93ebdad-9537-4e8b-a8c0-c2ba08f34307
|
||
slug: react-frontend-load-optimization
|
||
title: React 前端加载优化
|
||
summary: ""
|
||
status: published
|
||
tags: []
|
||
cover: ""
|
||
version: 1
|
||
slug_source: manual
|
||
slug_locked: true
|
||
published_at: "2022-10-11T18:13:47+08:00"
|
||
created_at: "2022-10-11T18:13:47+08:00"
|
||
updated_at: "2026-01-07T18:10:36+08:00"
|
||
---
|
||
|
||
## 主要问题
|
||
这次的 December 项目采用的是前后端分离的技术，交互使用的是 Axios ，但目前遇到的问题是，首次加载网站的时间过于久了，根据 report 的分析，我认为可能存在的问题是 react-router-dom 一次性加载了所有的组件，导致了加载变慢。
|
||
|
||
所以，主要的解决策略集中在对 router 的懒加载上，让它分批次地加载组件。
|
||
|
||
当然我还怀疑 React-Mui 组件库也拖慢了网站的加载，毕竟它是有些大的，但是应该还好，毕竟加载时是分开导入的，先解决 Router 的问题吧
|
||
|
||
## 解决方案
|
||
导入 lazy,Suspense 包
|
||
```js
|
||
import { lazy,Suspense } from 'react';
|
||
```
|
||
lazy 用于懒加载 ， Suspense 用于加载 loading
|
||
```js
|
||
const MyComponent = lazy(() => import('./MyComponent'))
|
||
|
||
<Suspense fallback={<div>Loading...</div>}>
|
||
<RouterProvider router={router} />
|
||
</Suspense>
|
||
```
|