Split up vendors into smaller chunks

webpack.config.js

// The best way to split up your npm deps into smaller chunks

module.exports = (env) => {
  const config = {
    // ... rest of config options
    optimization: {
      runtimeChunk: "single",
      splitChunks: {
        cacheGroups: {
          vendors: {
            test: /[\\/]node_modules[\\/]/,
            name(module) {
              const [_, afterNodeModules] = module.context.split("/node_modules/")
              if (!afterNodeModules) {
                return false
              }
              const packageName = afterNodeModules.split("/")[0]

              const moduleFileName = module
                .identifier()
                .split("/")
                .reduceRight((item) => item)

              // npm package names are URL-safe, but some servers don't like @ symbols
              return `vendors.${packageName.replace("@", "")}.${moduleFileName}`
            },
            chunks: "all"
          }
        }
      }
    }
  }
  return config
}