React 代码分割后组件重复加载怎么办？

上官世英提问于 2026-03-15 11:28:22 阅读 56

优化

我在用 React 的 lazy + Suspense 做路由级别的代码分割，但发现每次切换到同一个路由时，组件都会重新加载，导致状态丢失。明明已经加载过一次了，为什么还会重复执行？是不是我写法有问题？

这是我的写法：

const LazyPage = React.lazy(() => import('./LazyPage'));

function App() {
  return (
    <Suspense fallback="Loading...">
      <Routes>
        <Route path="/page" element={<LazyPage />} />
      </Routes>
    </Suspense>
  );
}

切换到 /page 再切走，回来就又 loading 一次，控制台也看到模块被重新请求了。是不是 webpack 没缓存？还是我漏了什么配置？

我来解答赞 1 收藏

反馈

暂无解答