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

这个配置其实已经接近了，但有几个细节可以优化。首先要把缓存组的优先级调整一下，不然Webpack可能会按自己想法合并代码。

在cacheGroups里加个minSize和maxSize，控制拆分粒度。另外vendor组可以再细化下规则，避免误伤。我给你个改进版：

optimization: {

  splitChunks: {

    chunks: 'all',

    cacheGroups: {

      vendor: {

        test: /[\/]node_modules[\/](lodash|axios)/,

        name: 'vendors',

        priority: -10,

        enforce: true,

        minSize: 30000,

        maxSize: 50000

      },

      default: {

        minChunks: 2,

        priority: -20,

        reuseExistingChunk: true

      }

    }

  }

}

这里把vendor规则写得更明确些，只针对你提到的库。minSize和maxSize能防止拆得太碎或太集中。记得把priority调低点，让默认规则有机会生效。

折腾这些确实挺烦人，不过一旦搞定了能省不少流量。服务端压力也能小一点，特别是用户量上来的时候。要是还不行，考虑用Dynamic Imports动态加载公共模块。

你的配置问题在于把所有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都正确指向入口。