Reduce bundle size for React application

[Poolshark]

Hi! Since I'm pretty new to Webpack and have never set up a React project with Webpack only (I have used either Craco or React Scripts), I am a bit stuck with my bundle size.

The exact same application has a total bundle size of 5.3MB when I build via Craco, if I use Webpack with my custom config I get 18.9MB!. So clearly I have misconfigured something here... (since Craco also relies on Webpack in the end).

I have tried all sorts of configs already but nothing seems to do anything with my bundle size. Here is my webpack.config.ts

const configurationBuilder: DevConfigBuilderProps = env => {
  return {
    mode: "production",
    output: {
      path: resolve(__dirname, "build"),
      asyncChunks: true,
      clean: true,
    },
    optimization: {
      minimize: true,
      moduleIds: "deterministic",
      nodeEnv: "production",
      realContentHash: true,
      removeAvailableModules: true,
      removeEmptyChunks: true,
      usedExports: true,
    },
    entry: resolve(__dirname, `${getAppDirectory(env.app)}/src/index.tsx`),
    resolve: {
      plugins: [PnpWebpackPlugin],
      extensions: [".tsx", ".ts", ".js", ".jsx"],
      alias: {
        ...sharedAliases,
        ...(env.app === "campus" ? campusAliases : env.app === "create" ? createAliases : signupAliases),
      },
      fallback: fallback,
    },
    resolveLoader: {
      plugins: [PnpWebpackPlugin.moduleLoader(module)],
    },
    plugins: [
      new HtmlWebpackPlugin({
        template: resolve(__dirname, `${getAppDirectory(env.app)}/public/index.html`),
      }),
      new ProvidePlugin({ process: "process/browser.js" }),
      new ProgressBarPlugin({ format: `  :msg [:bar] ${chalk.green.bold(":percent")} (:elapsed s)` }),
      new BundleAnalyzerPlugin(),
    ],
    module: {
      rules: rules,
    },
    devtool: "source-map",
  };
};

The main.js which is produced here is about 4x larger than when building with Craco!

Can anyone help?
Thanks! 🙌

[vankop]

maybe craco build has several chunks in result? since both results are webpack build probably you can use https://www.npmjs.com/package/webpack-bundle-analyzer to compare results

[Poolshark]

Just to follow up and close this discussion here - once again thank you @vankop for pushing me into the right direction here. Using the bundle analyzer with the new webpack configuration and compare it to the old Craco version, definitely helped to investigate the different bundle outputs in detail. Although, I have to admit it does not give you the answer why certain things are bundled differently, it can lead you when trying out different things in your webpack.config.