How to address several javascript_pack_tag's when having at least one namespace in routes file in rails

In my routes I have something like:

...
namespace :backend do
  ...
end
...

Now

• I have to use two different 'ApplicationControllers' as entry point for my root application route and my backed application route,
• This will result in having two different head html sections
• Now I have to use javascript_pack_tag in at least two different places within my code

So this gives me the possibility to use

# root application route
= javascript_pack_tag 'application', 'data-turbo-track': 'reload' ...

# backend application namespace
= javascript_pack_tag 'backend', 'data-turbo-track': 'reload' ... 

So now I have to define backend.js and application.js which will differ because in backend I might be using stuff I dont need in my root application.

I see several possiblities on how to handle this issue with downsides to everyone. So I was wondering, which one option might the best:

• using only one application.js file
  • might result in having depencies with root or backend which I don't need and affect loading time as well
• using two 'application' js-file
  • So it might be a good practice to split them into several files like import.js, setup.js and binding them into backend.js and application.js to have dry code
• using a base.js file so I can do stylesheet_pack_tag base, backend ... and stylesheet_pack_tag base, application ...
  • not sure if this will be working correctly

How do these different approaches affect compiling time? I have noticed that on my front application images have rather slow loading time. Not sure if this might be related to this.

So what is the best practice to address this?