Large size of application.js produced by esbuild

[allomov]

Hello, everyone! This issue is about finding a solution for a large-size application.js file produced by the jsbundling-rails+esbuild+sprokets bundle.

In this file, we provide esbuild with an --bundle option, which leads each file compiled to app/assets/builds to have included all imported modules

jsbundling-rails/lib/install/esbuild/install.rb

Line 5 in c89eb02

build_script = "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds --public-path=assets"

After the assets pipeline processes these files, you get an output application.js file with many libraries imported multiple times. In my case, there are ~100 inclusions of React and other libraries, and the raw produced file has a 95MB size. I can make it look better by adding the --minify option, which will reduce the size of the application.js to 27MB, but the problem with repeated imports remains the same.

There is a discussion of this problem in evanw/esbuild#475, and it looks like the author of esbuild does not take clever linking as a priority (evanw/esbuild#475 (comment) with evanw/esbuild#475 (comment) and evanw/esbuild#2818 (comment)).

Would you happen to have any suggestions on how to approach this issue? My only thought now is switching to webpack (probably with esbuild-loader).

[allomov]

I resolved this issue by adding a main.js file that imported all other files and slightly changing the configuration for esbuild in esbuild.config.js like this:

build({
  entryPoints: [path.join(process.cwd(), "app/javascript/main.js")],
  bundle: true,
  minify: true,
  format: "iife",
  allowOverwrite: true,
  outdir: path.join(process.cwd(), "app/assets/builds"),
  absWorkingDir: path.join(process.cwd(), "app/javascript"),
  sourcemap: true,
  plugins: [ImportGlobPlugin.default()],
  target: browserslistToEsbuild(targets)
})