react-loadable懒加载使用

cat10month2025-10-30 8:09

bash 复制代码

npm install react-loadable --save
# 或
yarn add react-loadable

//使用

javascript 复制代码

import Loadable from 'react-loadable';
import { Spin } from 'antd'; // 可配合 antd 的 Spin 作为加载动画

// 1. 定义加载状态组件（加载过程中显示）
const LoadingComponent = () => (
  <div style={{ padding: '20px', textAlign: 'center' }}>
    <Spin size="small" tip="加载中..." />
  </div>
);

// 2. 使用 Loadable 包装需要懒加载的组件
const LoadableDetail = Loadable({
  // 动态导入组件（返回 Promise）
  loader: () => import('./Detail'), // 注意：这里是异步导入，webpack 会自动分割代码
  // 加载过程中显示的组件
  loading: LoadingComponent,
});

路由中使用

javascript 复制代码

const LoadableAbout = Loadable({
  loader: () => import('./pages/About'),
  loading: Loading,
});

const App = () => (
  <Router>
    <Routes>
      {/* 访问 / 时加载 Home 组件的 chunk */}
      <Route path="/" element={<LoadableHome />} />
      {/* 访问 /about 时加载 About 组件的 chunk */}
      <Route path="/about" element={<LoadableAbout />} />
    </Routes>
  </Router>
);

每次在加载页面前都会进行懒加载