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

什么是懒加载（Lazy Loading）

默认情况下：

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

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

结果：

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

用户打开首页时：

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

全部下载。

缺点：

• 首屏资源大

• 首次加载慢

• FCP/LCP变差

---

什么是分包（Code Splitting）

将：

main.js (3MB)

拆成：

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

访问哪个页面：

按需加载哪个chunk

这就是分包。

---

React.lazy

React 提供：

React.lazy()

实现组件懒加载。

例如：

import React, { lazy } from 'react';

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

此时：

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

而是生成：

user.chunk.js

---

为什么需要 Suspense

因为组件是异步加载：

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

加载过程中：

User = undefined

React 需要一个 Loading UI。

所以必须使用：

<Suspense fallback={<Loading />}>

---

完整写法

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

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

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

流程：

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

---

路由级懒加载（最常用）

实际项目一般这样写：

React Router：

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>
  );
}

生成：

main.js

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

---

项目优化效果

假设：

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

不分包：

首屏下载

200 + 500 + 800
= 1500KB

分包：

首次访问首页

仅下载
200KB

进入报表：

再下载
800KB

首屏速度明显提升。

---

React.lazy 底层原理

本质利用 ES Module 动态导入：

import('./pages/User');

返回：

Promise

即：

Promise<Component>

React.lazy 接收 Promise：

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

等 Promise resolve 后再渲染组件。

---

面试回答

如果面试官问：

React.lazy + Suspense 是什么？

可以回答：

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

如果继续追问：

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

你可以答：

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