alsaraha

alsaraha

Esbuild multiple output files?

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)

Marked As Solved

zachallaun

zachallaun

  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).

Where Next?

Popular in Questions Top

gshaw
What is the idiomatic way of matching for not nil in Elixir? E.g., First way: defp halt_if_not_signed_in(conn, signed_in_account) when...
New
ovidiubadita
Hey all, I discovered Elixir and I love it. I always wanted to learn a functional programming and I intended to go for Haskell, but afte...
New
vegabook
I’m brand new to Phoenix and I have stripped one of the demo applications to the bone. I just want to get an svg up on the screen. Here i...
New
vonH
When I run the Plug and I recompile I wind up having to use Ctrl C to quit iex and start again. Witht the help of rlwrap I can use the cu...
New
lucidguppy
I have a super simple question about elixir - how would I take a file like this foo bar baz and output a new file that enumerates th...
New
itssasanka
Hi all, Trying to get some more clarity over utc_datetime and naive_datetime for Ecto: The documentation above suggests that while ...
New
nobody
Hi! In PHP: $_SERVER[‘SERVER_ADDR’] - in Elixir? Searched the docs for ip address and the web, no good results. Thanks!
New
ashish173
I am using Ecto timestamps with postgres, I can see the timestamps() use the :naive_dateime but for my use case I wanted to store the ti...
New
jononomo
For some reason my phoenix channels are working for me in my local dev environment, but as soon as I deploy via Docker, I get a 403 error...
New
vonH
In asking this question I am more interested about the expressiveness of the language itself and less concerned about the availability of...
New

Other popular topics Top

AstonJ
Posting this to see if we can make things easier for people to get into Neovim. If you use Neovim and have a favourite distro please let ...
New
skosch
To my knowledge, put_in, Map.update etc. all have the one limitation of not automatically creating intermediate keys when needed (for exa...
New
chrismccord
As promised, the first release candidate of Phoenix 1.3.0 is out! This release focuses on code generators with improved project structure...
New
ovidiubadita
Hey all, I discovered Elixir and I love it. I always wanted to learn a functional programming and I intended to go for Haskell, but afte...
New
fireproofsocks
Forgive me if this is obvious, but how does one delete a database record WITHOUT selecting it first? Ecto.Repo — Ecto v3.14.0 has exampl...
New
msaraiva
Surface is an experimental library built on top of Phoenix LiveView and its new LiveComponent API that aims to provide a more declarative...
564 43622 214
New
jay1
Why is it that the mnesia database isn’t the most preferred database for use in Elixir/Phoenix?
New
SoCreat
i’m a new one to elixir which editor can i use vs code? or atom? Thanks! :smiley:
New
gausby
I asked this very same question on twitter and got some interesting feedback, but I thought it would be a good question to ask here as we...
1207 39297 209
New
shijith.k
I am trying to start a new phoenix project with elixir 1.9, but mix phx.new does not work. It says that ** (Mix) The task "phx.new" could...
New

We're in Beta

About us Mission Statement