Idea for explicitly splitting out chunks for specific groups of vendor modules

webpack.config.js

const { configureCacheGroups } = require('./webpack.utils')

const cacheGroups = configureCacheGroups({
  'react': ['react', 'react-dom'],
  'lodash': ['lodash'],
  'redux': ['redux', 'react-redux'],
  'semantic-ui': ['semantic-ui-react'],
  'core-js': ['core-js'],
})

module.exports = {
  //...
  optimization: {
    runtimeChunk: 'single',
    splitChunks: {
      chunks: 'all',
      maxInitialRequests: Infinity,
      minSize: 0,
      cacheGroups: cacheGroups,
    },
  },
}

webpack.utils.js

// Create a cacheGroups config object for specified groups of vendor modules.
// Allows separate caching (content-based) for large vendor modules.
// -> Return includes ‘other’ cacheGroup with all non-matched remaining ones.
const configureCacheGroups = (moduleGroups) => {
  const modulePatt = (sub) => new RegExp(`[\\/]node_modules[\\/]${sub}[\\/]?`)
  const excludePatt = (names) => modulePatt(`(?!${names.join('|')})`)
  const includePatt = (names) => modulePatt(`(${names.join('|')})`)

  // cacheGroups config object for specified vendor module groups
  const groups = Object.entries(moduleGroups)
    .reduce((cacheGroups, [name, modules]) => ({
      ...cacheGroups,
      [name]: {
        test: includePatt(modules),
        name: `vendor~${name}`,
      },
    }), {})

  // catch-all for the rest of the packages that are not explicitly specified.
  const exclude = Object.values(moduleGroups)
    .reduce((all, group) => all.concat(group))
  const other = {
    test: excludePatt(exclude),
    name: 'vendor~other',
  }

  return { ...groups, other }
}

module.exports = {
  configureCacheGroups,
  //...
}