懒加载与分包：React.lazy + Suspense

这是 React 面试中非常高频的性能优化题。

什么是懒加载（Lazy Loading）

默认情况下：

javascript 复制代码

import Home from './pages/Home';
import User from './pages/User';
import Report from './pages/Report';

Webpack/Vite 打包时会把这些页面全部打进首屏 Bundle。

结果：

css 复制代码

main.js
├── Home
├── User
├── Report
└── ...

用户打开首页时：

diff 复制代码

首页代码
+
用户页代码
+
报表页代码

全部下载。

缺点：

首屏资源大
首次加载慢
FCP/LCP变差

什么是分包（Code Splitting）

将：

css 复制代码

main.js (3MB)

拆成：

arduino 复制代码

main.js
home.chunk.js
user.chunk.js
report.chunk.js

访问哪个页面：

复制代码

按需加载哪个chunk

这就是分包。

React.lazy

React 提供：

scss 复制代码

React.lazy()

实现组件懒加载。

例如：

javascript 复制代码

import React, { lazy } from 'react';

const User = lazy(() => import('./pages/User'));

此时：

sql 复制代码

User页面不会立即打包进主包

而是生成：

复制代码

user.chunk.js

为什么需要 Suspense

因为组件是异步加载：

ini 复制代码

const User = lazy(() => import('./pages/User'));

加载过程中：

ini 复制代码

User = undefined

React 需要一个 Loading UI。

所以必须使用：

ini 复制代码

<Suspense fallback={<Loading />}>

完整写法

javascript 复制代码

import React, { lazy, Suspense } from 'react';

const User = lazy(() => import('./pages/User'));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <User />
    </Suspense>
  );
}

流程：

markdown 复制代码

进入页面
    ↓
开始请求 user.chunk.js
    ↓
显示 Loading...
    ↓
加载完成
    ↓
渲染 User组件

路由级懒加载（最常用）

实际项目一般这样写：

React Router：

javascript 复制代码

const Home = lazy(() => import('@/pages/Home'));
const User = lazy(() => import('@/pages/User'));
const Report = lazy(() => import('@/pages/Report'));

function RouterConfig() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/user" element={<User />} />
        <Route path="/report" element={<Report />} />
      </Routes>
    </Suspense>
  );
}

生成：

arduino 复制代码

main.js

home.chunk.js
user.chunk.js
report.chunk.js

项目优化效果

假设：

复制代码

首页 200KB
用户页 500KB
报表页 800KB

不分包：

ini 复制代码

首屏下载

200 + 500 + 800
= 1500KB

分包：

复制代码

首次访问首页

仅下载
200KB

进入报表：

复制代码

再下载
800KB

首屏速度明显提升。

React.lazy 底层原理

本质利用 ES Module 动态导入：

go 复制代码

import('./pages/User');

javascript 复制代码

Promise

即：

javascript 复制代码

Promise<Component>

React.lazy 接收 Promise：

scss 复制代码

lazy(() => import('./User'))

等 Promise resolve 后再渲染组件。

面试回答

如果面试官问：

React.lazy + Suspense 是什么？

可以回答：

React.lazy 用于实现组件级懒加载，通过动态 import 将组件拆分成独立 Chunk，实现代码分包。Suspense 用于处理异步加载状态，在组件加载完成前展示 fallback 内容。实际项目中通常结合 React Router 做路由级懒加载，从而减少首屏 Bundle 体积，提高页面加载性能。

如果继续追问：

React 项目性能优化做过什么？

你可以答：

markdown 复制代码

1. React.lazy + Suspense 路由懒加载
2. webpack splitChunks 分包
3. 图片懒加载
4. useMemo/useCallback减少重复渲染
5. 虚拟列表优化大数据渲染
6. CDN加速静态资源
7. gzip/br压缩
8. Tree Shaking