代码分割后模块串行加载怎么优化？

Des.素平提问于 2026-03-14 02:29:19 阅读 47

优化

我在用 React 做路由级代码分割，发现多个动态 import 的模块是串行加载的，首屏白屏时间变长了。比如下面这样：

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

// 路由里同时用到了这两个组件

有没有办法让它们并行加载？或者至少提前预加载？试过 Promise.all 包一下但好像没生效。

我来解答赞 12 收藏

反馈

1 条解答

端木一涵 Lv1

两个 import() 本身是并行的，不会串行。检查一下是不是网络瀑布问题。

用 webpack 的 magic comment 预加载：

const PageA = React.lazy(() => import(/* webpackPrefetch: true */ './PageA'));

const PageB = React.lazy(() => import(/* webpackPrefetch: true */ './PageB'));

或者手动提前触发加载：

// 在入口/根组件的 useEffect 里

useEffect(() => {

  Promise.all([

    import('./PageA'),

    import('./PageB'),

  ]);

}, []);

webpackPrefetch 会利用 link preload 在浏览器空闲时提前拉资源，比手动 Promise.all 更优雅。

2026-03-14 04:00