"force" a file to be splitted into multiple chunks?

[richarddd]

Hey all,

I have a file from a dependency which contains a lot of exports:

export const a...
export const b...
export const c...
export const d...
....
export const ...

This file is then being used from multiple places:
file-a.js

import {a,d} from "../big-vendor-js-file.js"

file-b.js

import {b,c} from "../big-vendor-js-file.js"

When using bundling with code splitting, this file is pretty much intact but extracted to a one large chunk.

Is there anyway to "force" esbuild to chop this file into smaller prices? Right now even though just a small fraction of this file is need every module reads all the contents because of that large chunk?

[evanw]

No there isn't currently a way to do this (other than to move those constants to separate files).

For context: old versions of esbuild used to split individual files up like this, but I had to remove this optimization when top-level await was added to the language because this made correctness too complicated to reason about. I'd like to get this optimization added back in once esbuild's top-level await and code splitting are no longer experimental.

[richarddd]

No there isn't currently a way to do this (other than to move those constants to separate files).

For context: old versions of esbuild used to split individual files up like this, but I had to remove this optimization when top-level await was added to the language because this made correctness too complicated to reason about. I'd like to get this optimization added back in once esbuild's top-level await and code splitting are no longer experimental.

Got it, thanks. Any indication which version this changed in? I could maybe try to mark the file as external and chop it up using the older esbuild version 🤔

[evanw]

It was removed a while ago unfortunately. In version 0.10.1.

[richarddd]

Maybe a temporary workaround (until top level is stable) could be to tell esbuild which modules that is safe to apply the more agressive optimization to?

{ enhancedSplitting: ["node_modules/package-a","node_modules/package-b"]}

[chungwu]

I'm running into the same issue here.

Here's an example where a library exports multiple functions, and I have multiple entrypoints using different subsets of functions exported from the library. Unfortunately, the library remains a single chunk with all the functions used by both entrypoints, so each entrypoint must load all functions by the other entrypoints as well.

In our real-world use case, the library is antd, so different entrypoints are forced to load all React components used by any of the entrypoints...

[godenji]

I'd like to get this optimization added back in once esbuild's top-level await and code splitting are no longer experimental.

Thanks for esbuild, huge improvement over webpack @evanw

That said, any idea when, if ever, we'll be seeing the code splitting optimization built back into esbuild? Many are paying a heavy price due to similar scenario to the OP.

It's tough having to download the kitchen sink when you've only used a single import from an all-the-things export file -- library authors could do better, yes, but if the buid tool were able to apply code splitting optimizations it would instantly reduce the global javascript carbon footprint (via reduced bundle sizes) by at least 10%, not to mention bringing relief to webapp developers worldwide :)