代码分割后动态加载分包时，如何处理依赖模块重复加载的问题？

程序猿诗晴提问于 2026-02-09 13:28:30 阅读 21

优化

我在用React.lazy实现代码分割时遇到问题。页面A和页面B都引用了lodash，按路由拆分的两个分包里都包含了lodash代码。虽然配置了webpack的splitChunks，但动态加载时发现两个分包依然重复加载了这个依赖。

尝试过调整splitChunks的cacheGroups配置：


optimization: {
  splitChunks: {
    chunks: 'all',
    cacheGroups: {
      vendors: {
        test: /[\/]node_modules[\/]/,
        name: 'vendors',
        priority: -10,
        initial: false // 尝试让公共包不包含在初始包里
      }
    }
  }
}

但打包结果里vendors包未被生成，动态加载的分包仍然重复包含node_modules里的代码。这样会导致多个分包重复加载相同依赖，该怎么解决？

分包加载

我来解答赞 5 收藏

反馈

2 条解答

东景（打工版） Lv1

这个问题其实挺常见的，主要是因为动态加载的分包和主包之间的依赖关系没有被正确提取出来。你尝试用 splitChunks 的思路是对的，但配置上可以稍微调整一下。

首先，initial: false 这个配置其实是多余的，去掉它会更好。另外，vendors 这个 cacheGroup 的优先级设置得有点低，可能会导致 Webpack 忽略它。你可以试试下面这种更清晰的写法：

optimization: {

  splitChunks: {

    chunks: 'all',

    minSize: 0, // 确保小模块也能被提取

    cacheGroups: {

      common: {

        test: /[\/]node_modules[\/]/,

        name: 'vendors',

        priority: 10, // 提高优先级，确保命中

        reuseExistingChunk: true // 避免重复打包

      }

    }

  }

}

这里我把 priority 调高了，同时启用了 reuseExistingChunk，这个选项能确保已经打包过的模块不会被重复提取到其他分包里。

如果还是有问题，可以再加一个针对具体依赖的规则，比如单独提取 lodash：

cacheGroups: {

  lodash: {

    test: /[\/]node_modules[\/]lodash/,

    name: 'lodash',

    priority: 20, // 比 common 更高优先级

    reuseExistingChunk: true

  },

  common: {

    test: /[\/]node_modules[\/]/,

    name: 'vendors',

    priority: 10,

    reuseExistingChunk: true

  }

}

这样配置后，Webpack 会把 lodash 单独打成一个包，并且在动态加载时复用这个包，而不是每个分包都重复包含它。

最后提醒一下，记得检查你的 React.lazy 和 Suspense 的使用方式，确保动态加载的组件是按需引入的，类似这样：

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

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

如果这些都配好了，分包重复加载的问题应该就能解决了。我之前也踩过类似的坑，调整完配置后清爽多了。

2026-02-14 22:03

百里景景 Lv1

你这个问题出在 splitChunks 的配置上，特别是 initial: false 这个设置。React.lazy 动态加载的 chunk 属于异步 chunk，而你把 vendors cacheGroup 设置成 initial: false，意思是这个组只打包异步模块，但 test 又匹配 node_modules，导致逻辑冲突，webpack 没法正确抽离。

正确的做法是让 vendors 同时作用于 all 类型的 chunk，并且确保它能被异步加载进来。改一下你的配置：

optimization: {

  splitChunks: {

    chunks: 'all',

    cacheGroups: {

      vendors: {

        test: /[\/]node_modules[\/]/,

        name: 'vendors',

        priority: 10,

        chunks: 'all'

      }

    }

  }

}

注意这里去掉了 initial: false，因为它会限制只从入口 chunk 抽离代码，而动态 import 的模块不会触发它的提取。改成 chunks: 'all' 才能让 webpack 在所有类型的 chunk 中识别公共依赖。

另外建议加一个 common 组，专门提取多个动态分包之间的公共模块，比如两个页面都用了 lodash：

common: {

  name: 'common',

  minChunks: 2,

  priority: 5,

  reuseExistingChunk: true

}

这样 webpack 就会自动把被至少两个 chunk 引用的模块单独打成一个包，包括你在不同 lazy 组件里 import 的 lodash。

最后检查打包结果可以用 webpack-bundle-analyzer，跑一下看看 vendors 和 common 包是不是真的被独立出来了，别靠猜。API调用层面不影响这事，但你如果在 Node.js 侧做 SSR 或预取，记得按需 prefetch 这些公共包，避免运行时重复加载。

2026-02-09 13:30