Esbuild multiple output files?

Phoenix Forum Questions / Help
,
1

I have two separate questions,

1. How to build two files using esbuild?

in the config/config.exs file, here is the default esbuild configuration:

config :esbuild,                                                                                                                                                                            
  version: "0.14.29",                                                                                                                                                                       
  default: [                                                                                                                                                                                
    args:                                                                                                                                                                                   
      ~w(js/app.js --bundle --target=es2017 --outdir=../priv/static/assets --external:/fonts/* --external:/images/*),                                                                       
    cd: Path.expand("../assets", __DIR__),                                                                                                                                                  
    env: %{"NODE_PATH" => Path.expand("../deps", __DIR__)}                                                                                                                                  
  ]

it only produces one file which is js/app.js, how can I generate two files using two separate input files?

2. What is the best way to use different js code in different pages?

let’s say that page 1 needs script 1 only

but page 2 needs script 1 AND script 2

is it better to make two separate js files and serve them when needed or just combine every thing in one file and send it to the user (regardless of whether he will visit the pages that need the other script or not)

1 Like
2
  1. You can add additional files after app.js and they will be generated using the same options. (See esbuild docs for more)
args:
  ~w(js/app.js js/other.js …)
  1. Numerous ways to do this. If the bundles are entirely separate, you could create multiple root layouts. If you always include one and occasionally more, you could make a custom plug and pipeline that you include for routes that need the additional bundle. The plug could set additional assets in the conn assigns that the root layout could loop over.

To answer your question of whether you should bother at all: it really depends on your page speed goals and the size of the bundles. I probably wouldn’t worry about it personally until I was sure that it would be a meaningful improvement (aka I’ve come to the point where I’ve profiled things and I know that JS bundle download/execution is slowing things down).

3 Likes