React Code Splitting using react-loader custom webpack config not working

So i followed this article to setup my custom webpack config https://www.toptal.com/react/webpack-react-tutorial-pt-1 . And used React-router based code splitting using react-loader. Below is the webpack bundle. Whenever I try to load home page, all other vendor dependencies load which are not part of home page. Any solution will be really helpful

enter image description here

    module.exports = function(_env, args) {
  const isProduction = args.mode === 'production';
  const isDevelopment = !isProduction;
  return {
    devtool: isDevelopment && 'cheap-module-source-map',
    entry: './src/index.js',
    output: {
      path: path.resolve(__dirname, 'dist'),
      publicPath: '/',
      library: '',
      libraryTarget: 'umd',
      filename: 'static/js/[name].[hash:8].js',
      chunkFilename: 'static/js/[name].[hash:8].chunk.js',
    },
    module: {
      rules: [
        {
          test: /\.(js|jsx|ts|tsx)?$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader',
            options: {
              cacheDirectory: true,
              cacheCompression: false,
              envName: isProduction ? 'production' : 'development',
            },
          },
        },
      ],
    },
    resolve: {
      extensions: ['.jsx', '.js', '.ts', '.tsx'],
    },
    plugins: [
      new webpack.HotModuleReplacementPlugin(),
      isProduction && new MiniCssExtractPlugin({
        filename: 'static/css/[name].[contenthash:8].css',
        chunkFilename: 'static/css/[name].[contenthash:8].chunk.css',
      }),
      new webpack.DefinePlugin({
        'process.env.NODE_ENV': JSON.stringify(isProduction ? 'production' : 'development'),
      }),
      new HtmlWebpackPlugin({
        template: path.resolve(__dirname, 'public/index.html'),
        inject: true,
      }),
      new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
      isDevelopment && new BundleAnalyzerPlugin(),
      new dotenv()
    ].filter(Boolean),
    optimization: {
      minimize: isProduction,
      minimizer: [
        new TerserWebpackPlugin({
          terserOptions: {
            compress: {
              comparisons: false,
            },
            mangle: {
              safari10: true,
            },
            output: {
              comments: false,
              ascii_only: true,
            },
            warnings: false,
          },
        }),
        new OptimizeCssAssetsPlugin(),
      ],
      splitChunks: {
        chunks: 'all',
        minSize: 0,
        // maxSize: 2500000,
        maxInitialRequests: 20,
        maxAsyncRequests: 20,
        cacheGroups: {
          vendors: {
            test: /[\\/]node_modules[\\/]/,
            name(module, chunks, cacheGroupKey) {
              const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];
              return `${cacheGroupKey}.${packageName.replace('@', '')}`;
            },
          },
          common: {
            minChunks: 2,
            priority: -10,
          },
        },
      },
      runtimeChunk: 'single',
    }
  };
};

Image Screenshots:

1. enter image description here enter image description here