人人都会AI编程

21.3 体积与加载优化

更新时间：2026-07-10

用户感知的性能很大程度上取决于首屏加载速度。减小 JavaScript 包体积、拆分代码、合理安排资源加载优先级，是前端优化的核心工作。React 项目中，我们可以从代码分割、按需加载、Tree Shaking 和资源预加载四个方面入手。

21.3.1 路由级代码分割：React.lazy + Suspense

单页应用通常会打包出一个巨大的 JS Bundle，导致首屏需要下载大量无关代码。React 内置的 React.lazy 和 Suspense 可以实现路由级别的按需加载——只有当用户访问某个路由时，才去加载对应的组件代码。

基础用法：

import { lazy, Suspense } from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';

const Home = lazy(() => import('./pages/Home'));
const Dashboard = lazy(() => import('./pages/Dashboard'));
const Settings = lazy(() => import('./pages/Settings'));

function App() {
  return (
    <BrowserRouter>
      <Suspense fallback={<div>加载中...</div>}>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/dashboard" element={<Dashboard />} />
          <Route path="/settings" element={<Settings />} />
        </Routes>
      </Suspense>
    </BrowserRouter>
  );
}

构建工具（Vite / Webpack）会为每个 import() 调用自动分离出独立的 chunk 文件。用户首次加载只下载当前路由所需代码，后续导航时再按需加载其他 chunk，大幅降低首屏包体积。

实用建议：

  • fallback 可以设置骨架屏或加载动画，避免白屏。
  • Suspense 可以嵌套使用，对不同级别的组件设置不同的加载提示。

21.3.2 组件级按需加载与动态导入

除了路由，大型组件（如富文本编辑器、图表库、视频播放器等）也可以做组件级别的懒加载。这些组件往往体积庞大，但并非每次页面打开都需要。

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

const Chart = lazy(() => import('./components/Chart'));
const VideoPlayer = lazy(() => import('./components/VideoPlayer'));

function Dashboard() {
  const [showChart, setShowChart] = useState(false);

  return (
    <div>
      <button onClick={() => setShowChart(true)}>显示图表</button>
      {showChart && (
        <Suspense fallback={<div>图表加载中...</div>}>
          <Chart />
        </Suspense>
      )}
    </div>
  );
}

用户点击按钮前，Chart 的代码根本不会加载。对于不常用的功能（如管理员设置面板、高级搜索过滤器等），这种“交互时加载”的策略非常有效。

21.3.3 Tree Shaking：让无效代码不进入打包

Tree Shaking（摇树优化）是构建工具通过静态分析 ES Module 模块的导入关系，移除未被引用的代码的过程。为了让 Tree Shaking 生效，开发者需注意以下几点：

  • 使用 ES Module 语法（import / export），避免 CommonJS 的 require，后者无法被静态分析。
  • 避免副作用：在 package.json 中声明 "sideEffects": false 或标记有副作用的文件，让构建工具更激进地移除“看起来无用”的模块。
  • 按需引入第三方库：大型工具库（如 lodash、moment）会携带大量你可能用不到的函数，应优先使用库的 ES Module 版本或按路径导入。

❌ 错误做法：

import _ from 'lodash';           // 引入整个 lodash，体积巨大
console.log(_.debounce);

✅ 正确做法：

import debounce from 'lodash/debounce';   // 只引入 debounce 函数
console.log(debounce);

或者直接使用支持 Tree Shaking 的替代库（如 lodash-es、date-fns）。现代构建工具（Vite 基于 Rollup，Webpack 5 支持 module）默认开启 Tree Shaking，但应用效果取决于你的代码写法。

21.3.4 资源预加载与懒加载策略

代码分割虽然减小了首屏体积，但用户操作时仍需等待 chunk 加载。可以通过预加载技术提前获取可能用到的资源，让导航几乎无感。

1. 图片与媒体懒加载

对于图片密集型页面，使用原生 loading="lazy" 属性简单有效：

<img src="/hero.jpg" loading="lazy" alt="hero" />

浏览器会在图片即将进入视口时才开始加载，节省初始带宽。

2. 组件预加载

对于用户很可能会点击的组件（如下一步按钮、关键菜单），可以使用 import() 的预加载能力。React.lazy 本身不提供预加载 API，但我们可以手动触发模块加载：

// 定义预加载函数
const loadDashboard = () => import('./pages/Dashboard');
const Dashboard = lazy(loadDashboard);

// 在用户悬停或即将需要时调用
<Link to="/dashboard" onMouseEnter={loadDashboard}>工作台</Link>

这样，当用户鼠标移入链接时，就开始下载 Dashboard 的 chunk。跳转时如果下载已完成，渲染即刻发生。

3. 字体与关键资源预加载

在 HTML 的 <head> 中使用 <link rel="preload"> 或 <link rel="prefetch">，可以在构建层或服务器端标记关键资源：

<link rel="preload" href="/fonts/main.woff2" as="font" crossorigin>
<link rel="prefetch" href="/assets/chart.chunk.js" as="script">
  • preload：告诉浏览器当前页面必定使用该资源，应立即以高优先级下载。
  • prefetch：标记未来可能使用的资源，浏览器在空闲时低优先级下载。

Next.js 中可以通过 <Head> 组件或 next/head 动态插入，或者使用 next/image 自动优化图片加载。

21.3.5 实战优化检查清单

  • ✔️ 路由组件是否全部使用了 lazy 加载并包裹 Suspense？
  • ✔️ 大体积非首屏组件是否采用了交互时懒加载？
  • ✔️ 是否检查了 Bundle 分析报告（如 vite-bundle-analyzer）中的冗余模块？
  • ✔️ 常用的工具函数是否使用了 Tree Shakeable 的引入方式？
  • ✔️ 图片和视频是否设置了懒加载或占位符？
  • ✔️ 是否对关键第三方脚本使用了 defer 或 async 避免阻塞渲染？

体积与加载优化是一个持续迭代的过程，结合路由分割、组件懒加载、Tree Shaking 和资源预加载，能将首屏加载时间大幅降低，改善用户留存和体验。这些技术并不高深，只需要在项目中有意识地运用，就能起到立竿见影的效果。