1. 懒加载（Lazy Loading）

React 提供了内置的懒加载方案：React.lazy + Suspense
常用于 页面级组件 和 第三方库 的懒加载。

基本用法

import { Suspense, lazy } from "react";

const Dashboard = lazy(() => import("./pages/Dashboard"));

function App() {
  return (
    <Suspense fallback={<p>页面加载中...</p>}>
      <Dashboard />
    </Suspense>
  );
}

✅ 页面首次加载时不会立即加载 Dashboard
✅ 页面需要时才动态加载

搭配路由使用

<Route
  path="/dashboard"
  element={
    <Suspense fallback={<p>Loading Dashboard...</p>}>
      <Dashboard />
    </Suspense>
  }
/>

TIP: 页面内的组件也可以懒加载，比如图表、富文本编辑器等重量级 UI 组件。

2. 代码拆分（Code Splitting）

为什么要拆分？

• 减少单个 JS 包的体积

• 按需加载页面/组件/模块

• 提升首屏加载速度

动态导入模块

import("./utils/HeavyUtils").then((module) => {
  const result = module.heavyFunction();
});

适用于：

• 复杂的工具函数库

• 第三方插件（图表库、富文本编辑器）

React + Webpack 自动拆分

现代 React 应用默认（如使用 Vite、CRA）就内置了代码拆分，动态 import() 语法会自动拆分代码。

3. Web Worker：多线程加速

前端为什么需要 Web Worker？

• React 的渲染和事件处理都在 主线程

• 如果有大量计算任务，会造成主线程阻塞，导致 UI 卡顿

Web Worker 帮你解决

将计算密集型任务交给 Worker，主线程专心处理 UI。

创建 Worker 文件

/src/worker.js

self.onmessage = function (e) {
  const result = heavyCalculation(e.data);
  self.postMessage(result);
};

function heavyCalculation(data) {
  let sum = 0;
  for (let i = 0; i < 1e8; i++) {
    sum += i;
  }
  return sum + data;
}

主线程调用 Worker

import { useEffect } from "react";

function HeavyTask() {
  useEffect(() => {
    const worker = new Worker(new URL("./worker.js", import.meta.url));
    worker.postMessage(100);

    worker.onmessage = (e) => {
      console.log("Worker 完成计算：", e.data);
    };

    return () => {
      worker.terminate();
    };
  }, []);

  return <div>计算任务交给 Worker，UI 不会卡顿</div>;
}

✅ Web Worker 在独立线程执行 heavyCalculation
✅ 主线程不卡，页面保持流畅

4. React + 懒加载 + Web Worker 实战

场景：

• 页面内有一个超大表格或数据可视化图表

• 数据需要大量计算或格式化，容易阻塞 UI

优化方案：

1. 懒加载图表组件

2. 使用 Web Worker 预处理数据

组合 Demo

import { Suspense, lazy, useEffect, useState } from "react";

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

function Dashboard() {
  const [data, setData] = useState(null);

  useEffect(() => {
    const worker = new Worker(new URL("./worker.js", import.meta.url));
    worker.postMessage(200);
    worker.onmessage = (e) => {
      setData(e.data);
    };
    return () => worker.terminate();
  }, []);

  return (
    <Suspense fallback={<p>Loading Chart...</p>}>
      {data && <Chart data={data} />}
    </Suspense>
  );
}

• Worker 处理数据，避免阻塞主线程

• 懒加载 Chart，优化组件初次渲染速度

5. 进阶优化建议

• React.memo 和 useMemo 缓存组件 & 计算结果

• 虚拟滚动（如 react-window、react-virtualized）优化长列表

• Web Worker + Service Worker 配合缓存策略，打造离线应用