evanw / esbuild

An extremely fast bundler for the web
https://esbuild.github.io/
MIT License
38.19k stars 1.15k forks source link

Missing cross file constant folding causes Svelte (using `esm-env`) not tree-shakeable #3972

Open hyrious opened 4 days ago

hyrious commented 4 days ago

I know cross file constant folding is not supported since that only happens in the first stage where esbuild optimizes each file separately and links them later. I'm openning this issue just to notify that because of svelte using esm-env, its development code won't be tree-shaked in esbuild.

Usually packages use hard-coded process.env.NODE_ENV check to separate dev codes, like Vue, which works fine with esbuild's define option. It's not svelte's fault to use esm-env, but that seems could only make rollup win in bundling svelte into production.

For reference, here's the test to bundle a hello-world svelte component:

$ npm run test:prod

  dist/main.js   67.2kb
  dist/main.css   172b

⚡ Done in 28ms
./dist/main.js 67.152 kB
./dist/main.js - rollup 39.962 kB
./dist/main.js - rollup - esbuild 35.449 kB

Let me explain the size a little:

  1. Rollup tree-shakes the DEV variable and replaces if (DEV) { ... } with { ... } or simpliy ; (empty statement).
  2. esbuild further optimizes these statements.
  3. Vite should produce similar output because it effectively does the same thing.

The final output size differs about 32 kB on the svelte module. It might be less when using more svelte features or building large websites.

Inqnuam commented 3 days ago

I'm linking this issue as they are very related