v6路由懒加载性能优化踩坑：代码分割策略分析

最近在将项目从React Router v5升级到v6的过程中，遇到了一个令人头疼的问题——路由懒加载性能异常。本文记录了完整的踩坑过程和解决方案。

问题现象

升级后发现页面跳转时出现明显的白屏延迟，通过Chrome DevTools分析发现，原本应该按需加载的组件在首次访问时会阻塞渲染。

初步排查

按照v6官方文档，我们这样配置了懒加载：

const Home = React.lazy(() => import('./pages/Home'));
const About = React.lazy(() => import('./pages/About'));

function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
    </Routes>
  );
}

但是这样配置后，首次访问仍然有明显延迟。

核心问题定位

经过深入排查，发现是Suspense组件没有正确包裹。正确的做法应该是：

import { Suspense } from 'react';

function App() {
  return (
    <Suspense fallback={<div>加载中...</div>}>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Suspense>
  );
}

进阶优化方案

为了进一步提升性能，我们采用了更精细的代码分割策略：

// 使用React.lazy + Suspense + 动态导入
const lazyRoute = (importFunc) => {
  const Component = React.lazy(importFunc);
  return () => (
    <Suspense fallback="加载中...">
      <Component />
    </Suspense>
  );
};

function App() {
  return (
    <Routes>
      <Route path="/" element={lazyRoute(() => import('./pages/Home'))} />
      <Route path="/about" element={lazyRoute(() => import('./pages/About'))} />
    </Routes>
  );
}