React 分包加载优化

React 分包加载优化：从串行到并行

React Router 6.4+ 数据路由的 lazy，把父渲染完才下载分包的串行流程，改成路由匹配即并行下载，性能提升约 50%。

一、传统分包为什么慢（串行瓶颈）

流程： 主包加载 → 父组件渲染（可能阻塞）→ 识别子路由 → 下载分包 JS → 渲染子组件

痛点： 父组件渲染完才去下载分包，一旦父组件有耗时逻辑（接口、计算），分包下载被严重阻塞，全程串行。

jsx 复制代码

// 旧写法：React.lazy + Suspense
const Project = React.lazy(() => import('./Project'));

function Layout() {
  // 假设这里阻塞 100ms
  const [now] = useState(Date.now());
  while (Date.now() - now < 100);

  return (
    <Suspense fallback={<div>Loading...</div>}>
      <Project />
    </Suspense>
  );
}

二、6.4+ 数据路由优化方案（并行加载）

核心原理： 路由不再只绑定 UI，同时绑定异步包加载 ------ 路由匹配后立刻并行下载分包，不用等父组件 render 完成。

jsx 复制代码

import { createBrowserRouter, RouterProvider } from 'react-router-dom';

const router = createBrowserRouter([
  {
    path: '/',
    element: <Layout />,
    children: [
      {
        index: true,
        // 关键：路由级 lazy，自动并行下载
        lazy: () => import('./Project'),
      },
    ],
  },
]);

function App() {
  return <RouterProvider router={router} />;
}

三、优化前后对比

维度	传统 `React.lazy` + `Suspense`	React Router 6.4+ 数据路由
加载模式	串行：父渲染 → 下分包	并行：父渲染与下分包同时跑
阻塞点	父组件阻塞 → 分包延迟下载	路由匹配即下载，无前置阻塞
耗时	约 140ms+	约 100ms 内，降 30%~50%
代码	需手动 `Suspense` 包裹	路由配置 `lazy`，自动处理

四、为什么能快这么多

旧版： UI 渲染驱动包加载，必须等父组件渲染完才知道要加载谁。 新版： 路由匹配驱动包加载，匹配路径立刻并行下载，父组件渲染和包下载同时进行，消除串行等待。

五、话术

我做过分包极致优化：用 React Router 6.4+ 数据路由的 lazy，把传统父渲染完才下载分包的串行流程，改成路由匹配就并行下载，父组件渲染和分包下载同时跑，复杂场景性能提升约 50%。

六、最佳实践

策略	说明
数据路由标配	必须用 `createBrowserRouter` + `RouterProvider`
路由级 lazy	替代组件级 `React.lazy`，自动并行
HTTP/2 多路复用	配合多路复用，分包更细更快
公共依赖抽离	`vendor` 长期缓存，进一步提速