Webpack打包时如何合理拆分Chunk避免重复代码？

伊可提问于 2026-03-16 21:04:25 阅读 8

优化

我用Webpack打包项目，发现多个页面引用了相同的第三方库（比如lodash和axios），但每个chunk里都包含了这些库的代码，体积特别大。

我试过用splitChunks配置，但效果不明显，甚至有时候还会把公共代码拆得更碎。有没有推荐的配置方式能真正把公共依赖抽出来？

这是我现在用的配置：

optimization: {
  splitChunks: {
    chunks: 'all',
    cacheGroups: {
      vendor: {
        test: /[\/]node_modules[\/]/,
        name: 'vendors',
        chunks: 'all',
      }
    }
  }
}

打包优化

我来解答赞 1 收藏

反馈

1 条解答

开发者梓涵 Lv1

你的配置问题在于把所有node_modules都打成一个vendors chunk，这样虽然抽出来了但颗粒度太粗。

试试这个思路：把大的第三方库单独抽出来，再配合缓存组优先级。

optimization: {

  splitChunks: {

    chunks: 'all',

    maxInitialRequests: 30,

    minSize: 20000,

    cacheGroups: {

      // 大的第三方库单独抽离

      defaultVendors: {

        test: /[/]node_modules[/](lodash|axios|react|vue|echarts|moment)[/]/,

        name: 'vendor-libs',

        chunks: 'all',

        priority: 20,

      },

      // 其他node_modules

      vendor: {

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

        name: 'vendors',

        chunks: 'all',

        priority: 10,

      },

      // 页面间公共代码

      common: {

        name: 'common',

        minChunks: 2,

        priority: 5,

        reuseExistingChunk: true,

      },

    },

  },

}

几个关键点：

1. 把lodash、axios、react这些大库用正则单独抽出来，打成vendor-libs chunk，它们更新频率低，可以长期缓存

2. priority很关键，数字大的先匹配，你的配置没设priority可能导致匹配顺序不对

3. minSize设20000是因为太小的库拆出来反而增加HTTP请求负担，不划算

另外提醒一下，如果你用的是lodash，别直接import整个库：

// 别这样

import _ from 'lodash'



// 改成这样，按需引入

import debounce from 'lodash/debounce'

import cloneDeep from 'lodash/cloneDeep'

lodash全量引入差不多700KB，拆成按需引入后可能就几十KB，差距巨大。

还有就是检查一下你的入口文件配置，如果用了多页面应用确保每个page都正确指向入口。

2026-03-17 11:00