I don’t, I use different root layouts for the admin dashboard and the frontend and include the correct css in each layout, if I really had to serve different files to the same root layout I would probably use a Plug or on_mount to know if the user is an admin or a default user and serve it conditionally like any other conditional.
As for the esbuild, in config.exs:
config :esbuild,
version: "0.18.0",
default: [
args: ~w(js/app.js js/video-player.js
--chunk-names=chunks/[name]-[hash] --splitting --format=esm --bundle --target=es2017
--outdir=../priv/static/assets --external:/fonts/* --external:/images/*),
cd: Path.expand("../assets", __DIR__),
env: %{"NODE_PATH" => Path.expand("../deps", __DIR__)}
]
You can see that I’m passing two files, app.js and video-player.js to the esbuild command, then in the video-player.js you can import your big deps normally and import it dynamically in a hook in the app.js file.
// app.js
Hooks.VideoPlayer = {
mounted() {
import("./video-player").then(
({ setupVideoPlayer }) => {
setupVideoPlayer(this.el);
}
)
}
}
This way the big video player dependency will be loaded only when you hit a page that uses the hook.
