feat: add admin publishing workflow and yar theme
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.
This commit is contained in:
parent
b78f4b39c9
commit
f0b50d13ea
121 changed files with 27139 additions and 550 deletions
36
content/posts/react-frontend-load-optimization.md
Normal file
36
content/posts/react-frontend-load-optimization.md
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
---
|
||||
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>
|
||||
```
|
||||
Loading…
Add table
Add a link
Reference in a new issue