React.lazy和React.Suspense路由懒加载案例展示

React 路由懒加载与代码分割实践

最新推荐文章于 2025-05-18 21:27:23 发布

原创

最新推荐文章于 2025-05-18 21:27:23 发布 · 640 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #路由懒加载 #suspense #lazy

本文详细介绍了如何在React应用中实现路由懒加载和代码分割，通过引入`lazy`和`Suspense`组件，实现按需加载不同模块，提高应用性能。示例代码展示了如何配置路由，包括各个组件的懒加载实现，如Recommend、Singers、Rank等，便于读者理解和应用。

1、在这里分享一下react路由懒加载的使用方式，可直接应用

可以让我们学会模块懒加载及代码分割(CodeSpliting)--进行举一反三

import React, {
   
    lazy, Suspense } from "react";
import {
   
    Redirect } from "react-router-dom";
import HomeLayout from "../layouts/HomeLayout";
import BlankLayout from "../layouts/BlankLayout";

const SuspenseComponent = Component => props => {
   
   
  return (
    <Suspense fallback={
   
   null}>
      <Component {
   
   ...props}></Component>
    </Suspense>
  )
}

const RecommendComp