背景
随着项目越来越大,打包后的包体积也越来越大,严重影响了首屏加载速度,需要对路由和组件做懒加载处理
主要用到了react中的lazy和Suspense。
废话不多说,直接上干货
路由懒加载
核心代码
import React, { lazy, Suspense } from "react";
const loading = () => <h3>loading....</h3>;
const Caidan1 = lazy(() => import("@/pages/mud1/caidan1"));
const meunRoutes = [
{
name: "模块1",
path: "/m1",
icon: <AppstoreOutlined />,
children: [
{
name: "gltf模型",
path: "/m1/caidan12",
icon: <AppstoreOutlined />,
element: (
<Suspense fallback={loading()}>
<Caidan1 />
</Suspense>
),
},
// 。。。。
配合路由表的完整例子文章来源:https://www.toymoban.com/news/detail-625223.html
// 路由表
import React, { lazy, Suspense } from "react";
import Home from "../pages/home";
import Layout from "@/components/Layout";
const loading = () => <h3>loading....</h3>;
const Caidan1 = lazy(() => import("@/pages/mud1/caidan1"));
const Caidan2 = lazy(() => import("@/pages/mud1/caidan2"));
// 404页面
const NotFound = () => <h1>**** 404 ****</h1>;
const meunRoutes = [
{
name: "模块1",
path: "/m1",
icon: <AppstoreOutlined />,
children: [
{
name: "gltf模型",
path: "/m1/caidan12",
icon: <AppstoreOutlined />,
element: (
<Suspense fallback={loading()}>
<Caidan1 />
</Suspense>
),
},
{
name: "模型动画",
path: "/m1/caidan13",
icon: <AppstoreOutlined />,
element: (
<Suspense fallback={loading()}>
<Caidan2 />
</Suspense>
),
},
],
},
];
// 配置路由表
const routes = [
{
path: "/",
element: <Navigate to="/home" />,
},
{
path: "/home",
element: <Home />,
},
{
path: "/",
element: <Layout />,
children: handleMenuRoutes(meunRoutes),
},
{ path: "*", element: <NotFound /> },
];
// 处理menu routes
function handleMenuRoutes(arr) {
let res = [];
arr.forEach((item) => {
if (item.children && item.children.length > 0) {
item.children.forEach((yitem) => {
let obj = {
path: yitem.path,
element: yitem.element,
};
res.push(obj);
});
}
});
return res;
}
const AppRouter = () => useRoutes([...routes]);
export { AppRouter, meunRoutes };
组件懒加载
import { useEffect, useState, lazy, Suspense } from "react";
const TestCpn = lazy(() => import("@/components/testCpn"));
const Home = () => {
const [show, setShow] = useState(false);
function fn() { setShow(true)}
return (
<div>
<button onClick={fn}>加载大组件</button>
{show && (
<Suspense>
<TestCpn />
</Suspense>
)}
</div>
);
};
export default Home;
效果
组件加载前
组件懒加载后
这样就会大大加快首屏加载速度文章来源地址https://www.toymoban.com/news/detail-625223.html
到了这里,关于性能优化-react路由懒加载和组件懒加载的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!