evanw / evanw/esbuild

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

Open
#3,972 2 comments 3 reactions 0 assignees View on GitHub
Dominant language
Go
Stars
40.1k
Forks
1.3k
PR merge metrics
No merged PRs in 30d

Description

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`](https://hyrious.me/npm-browser/?q=svelte@5.1.15/package/src/internal/client/errors.js:3), 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](https://hyrious.me/npm-browser/?q=vue@3.5.12/package/dist/vue.esm-bundler.js:18), 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](https://github.com/hyrious/esbuild-plugin-svelte/blob/main/smoking-test/build.ts) to bundle a hello-world svelte component:

```console
$ 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.

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.