reactjs - How to code-split webpack's vendor chunk?

Question

I have a webpack main.bundle.js that weights 287kb thanks to codesplitting, but my vendor.js is 5mb. When the user visits the website for the firs time, he will have to download 5.2mb, which is too large.

What is the proper way to split the vendor so the user only downloads the packages he needs to run the page, and then webpack prefetches all the remaining packages in the background?

I'm using webpack 4 (I'm waiting for webpack 5 to be supported by Storybook before upgrading. If there is a new way of doing it in W5, please le me know).

Here is my config:

/* eslint-env node */
const path = require("path");
const TerserPlugin = require("terser-webpack-plugin");
const Dotenv = require("dotenv-webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");

const isProductionMode = (mode) => mode === "production";

module.exports = () => {
  const env = require("dotenv").config({ path: __dirname + "/.env" });
  const nodeEnv = env.parsed.NODE_ENV;
  return {
    mode: "development",
    entry: "./src/index.tsx",
    output: {
      path: path.join(__dirname, "./dist"),
      filename: "[name].[hash].bundle.js",
      publicPath: "/",
    },
    resolve: {
      extensions: [".ts", ".tsx", ".js", "jsx", ".json"],
    },
    module: {
      rules: [
        {
          test: /.(ts|js)x?$/,
          exclude: /node_modules/,
          use: { loader: "babel-loader" },
        },
        { test: /.css$/, use: ["style-loader", "css-loader"] },
        { test: /.(png|jpg|jpeg|gif)$/, use: ["file-loader"] },
        {
          test: /.svg$/,
          use: [
            {
              loader: "babel-loader",
            },
            {
              loader: "react-svg-loader",
              options: {
                jsx: true,
              },
            },
          ],
        },
      ],
    },
    devServer: {
      historyApiFallback: true,
      port: 3000,
      inline: true,
      hot: true,
    },
    plugins: [
      new HtmlWebpackPlugin({
        template: "./src/index.html",
      }),
      new Dotenv(),
    ],
    optimization: {
      minimize: isProductionMode(nodeEnv),
      minimizer: isProductionMode(nodeEnv) ? [new TerserPlugin()] : [],
      splitChunks: { chunks: "all" },
    },
  };
};

question from:https://stackoverflow.com/questions/65858859/how-to-code-split-webpacks-vendor-chunk

Answer 1

This helped me in splitting the vendor bundle.

Source: https://gist.github.com/davidgilbertson/c9af3e583f95de03439adced007b47f1

splitChunks: {
  chunks: 'all',
  enforce: true,
  cacheGroups: {
    vendor: {
      test: /[\/]node_modules[\/]/,
      name(module) {
        // get the name. E.g. node_modules/packageName/not/this/part.js
        // or node_modules/packageName
        const packageName = module.context.match(/[\/]node_modules[\/](.*?)([\/]|$)/)[1];

        // npm package names are URL-safe, but some servers don't like @ symbols
        return `npm.${packageName.replace('@', '')}`;
      },
    },
  },
},