I forget to say this, but Chris mentioned at the end of the 1.0 blog that collocated JS hooks are an upcoming planned feature for LiveView. So, this could soon be a resolved issue.

For now you’d have something like this

{
  mounted() {
    this.loading = true;
    import("heavy_dep")
      .then(dep => {
        this.loading = false;
        # start using dep
        # assign stuff to this for use in other hook callbacks
        # …
      })
  },
  …
}

Depending on the bundler used this should generate additional js files, which are only loaded once that import function is called.

I’m bumping this as I see that Colocated hooks are in the works : Colocated Hooks by SteffenDE · Pull Request #3705 · phoenixframework/phoenix_live_view · GitHub

The fact that there will be a bundling/runtime distinction seems perfect to me and covers my use cases well. This would enable loading Liveview apps at runtime without hacks.

Huge thanks to SteffenD and the Phoenix team, this will be a real enabler.