冯梦华的日常

React 前端加载优化

主要问题

这次的 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>

December 项目 1a 版本释出

开发

December 总体采用前后端分离技术。 前端使用 React 、React-MU 和 基础前端构建语言,后端使用 FLask 和 Sqlite3 。

目前已初步开发完成,并且将代码规模控制在一定范围,后端部分代码也进行了不同程度地优化,这将是一个可长期维护的项目。