# Conditionally loading JS libraries

**URL:** <https://forum.elixirforum.com/t/conditionally-loading-js-libraries/68894>\
**Category:** Questions\
**Tags:** phoenix, liveview, hooks\
**Created:** [January 21, 2025, 3:43pm UTC](https://forum.elixirforum.com/t/conditionally-loading-js-libraries/68894 "2025-01-21T15:43:21Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Liam\_or](https://forum.elixirforum.com/letter_avatar_proxy/v4/letter/l/8e7dd6/32.png) [@Liam\_or](https://forum.elixirforum.com/u/Liam_or)\
**Post date:** [January 21, 2025, 3:43pm UTC](https://forum.elixirforum.com/t/conditionally-loading-js-libraries/68894/1 "2025-01-21T15:43:21Z")

</div>

I don’t suppose you can lazy load a library depending on runtime data? For example if it’s a certain user they can lazy load ‘library A’ but if not then ‘library B’ and so on.

---

<div class="post-metadata">

**Author:** ![victor23k](https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/victor23k/32/34084_2.png) [@victor23k](https://forum.elixirforum.com/u/victor23k)\
**Post date:** [January 22, 2025, 1:20pm UTC](https://forum.elixirforum.com/t/conditionally-loading-js-libraries/68894/2 "2025-01-22T13:20:50Z")

</div>

Check out [JS dynamic imports](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import). `import()` returns a Promise. If you serve both `libraryA` and `libraryB` you can dynamically import any of them depending on the logic that you implement.

---

<div class="post-metadata">

**Author:** ![Liam\_or](https://forum.elixirforum.com/letter_avatar_proxy/v4/letter/l/8e7dd6/32.png) [@Liam\_or](https://forum.elixirforum.com/u/Liam_or)\
**Post date:** [January 22, 2025, 2:22pm UTC](https://forum.elixirforum.com/t/conditionally-loading-js-libraries/68894/3 "2025-01-22T14:22:50Z")

</div>

Thanks. I believe Liveview uses default ESbuild. So to allow lazy loading perhaps it needs tinkering with?

---

<div class="post-metadata">

**Author:** ![victor23k](https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/victor23k/32/34084_2.png) [@victor23k](https://forum.elixirforum.com/u/victor23k)\
**Post date:** [January 22, 2025, 2:36pm UTC](https://forum.elixirforum.com/t/conditionally-loading-js-libraries/68894/4 "2025-01-22T14:36:45Z")

</div>

Yes, to avoid including the library in the esbuild bundle you can use [–external](https://esbuild.github.io/api/#external).

---

<div class="post-metadata">

**Author:** ![rhcarvalho](https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/rhcarvalho/32/32243_2.png) [@rhcarvalho](https://forum.elixirforum.com/u/rhcarvalho)\
**Post date:** [November 27, 2025, 1:54pm UTC](https://forum.elixirforum.com/t/conditionally-loading-js-libraries/68894/5 "2025-11-27T13:54:10Z")

</div>

Oh I didn’t find this thread yesterday! For anyone landing here in the future, here’s how to configure `esbuild` to use JS dynamic imports, and lazy load parts of the app on demand:

> [@Is it possible to have page-specific javascript with LiveView?](https://forum.elixirforum.com/t/is-it-possible-to-have-page-specific-javascript-with-liveview/32614/11):
>
> This is one of the two best threads that come up from search on the topic, so reviving it with an up-to-date solution for the benefit of all. Just like the OP, I wanted to use a heavy JS library in a single page without compromising the bundle size for the rest of the app. Nowadays Phoenix projects use esbuild by default, and modern browsers support [ESM modules and dynamic import](https://caniuse.com/es6-module-dynamic-import). To my surprise, asking [Gemini 3 produced a reasonable output](https://gemini.google.com/share/4e99ee866bb5), hinting at the right things. In a nutshell: Updat…