Significant size differences

[nightah]

Firstly thanks for the great plugin!

I was looking at potentially migrating our codebase to utilise esbuild and noticed that a compiled build was significantly larger than without esbuild. That is to say more than 2.5x larger than the output without esbuild, as below.

With standard CRA/Webpack:

File sizes after gzip:

  152.72 KB (-259.17 KB)  public_html\static\js\2.726246eb.chunk.js
  16.54 KB (-6.71 KB)     public_html\static\js\main.b3737a8f.chunk.js
  1.44 KB (+14 B)         public_html\static\css\2.60d63202.chunk.css
  776 B (-6 B)            public_html\static\js\runtime-main.f6cb6938.js
  641 B                   public_html\static\css\main.275971f0.chunk.css

With Esbuild:

File sizes after gzip:

  411.88 KB  public_html\static\js\2.ae05d37c.chunk.js
  23.25 KB   public_html\static\js\main.51dab84a.chunk.js
  1.42 KB    public_html\static\css\2.60d63202.chunk.css
  782 B      public_html\static\js\runtime-main.1ccb1639.js
  641 B      public_html\static\css\main.275971f0.chunk.css

In the grand scheme of things, a couple of hundred KB isn't that huge of a deal but I'm wondering if this is perhaps due to misconfiguration or something else that perhaps I missed?

Below is my craco configuration for reference:

const isCoverage = process.env.COVERAGE === "true";
const babelPlugins = isCoverage ? ["babel-plugin-istanbul"] : [];

module.exports = {
    babel: {
        plugins: babelPlugins,
    },
    plugins: [
        {
            plugin: require("craco-alias"),
            options: {
                source: "tsconfig",
                baseUrl: "./src",
                tsConfigPath: "./tsconfig.aliases.json",
            },
        },
        {
            plugin: require("craco-esbuild"),
            options: {
                enableSvgr: true,
                esbuildMinimizerOptions: {
                    target: "es6",
                    css: true,
                    minify: true,
                },
                skipEsbuildJest: true,
            },
        },
    ],
};

All other configurations can also be found here.

[yoole5699]

Because of esbuild's tree shaking https://github.com/privatenumber/esbuild-loader/issues/178#issuecomment-848077334 https://github.com/evanw/esbuild/issues/639#issuecomment-792057348

[nightah]

I think the issue is that it wasn't gzipping by default whereas webpack was.

I ended up swapping over to Vite instead of sticking with CRA and now I have the best of both worlds.