<turbo-stream action="append" target="posts_list"><template>    <div class="postbit" id="378840" data-post-id="378840">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="rhcarvalho" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/rhcarvalho/120/32243_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  rhcarvalho
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p><em>This is the second best thread that come up from search on the topic, so reviving it with an up-to-date solution for the benefit of all.</em></p>
<p>On a modern Phoenix LiveView app, I was able to keep the <code>app.js</code> bundle small while adding a heavy JS dependency needed only in a single LiveView page. Here’s the report on how to do it with <code>esbuild</code>, code-splitting and ESM dynamic imports:</p>
<aside class="quote quote-modified" data-post="11" data-topic="32614">
  <div class="title">
    <div class="quote-controls"></div>
    <img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/rhcarvalho/48/32243_2.png" class="avatar">
    <div class="quote-title__text-content">
      <a href="https://forum.elixirforum.com/t/is-it-possible-to-have-page-specific-javascript-with-liveview/32614/11" rel="nofollow">Is it possible to have page-specific javascript with LiveView?</a> <a class="badge-category__wrapper " href="/c/questions-help/questions/53" rel="nofollow"><span data-category-id="53" style="--category-badge-color: #C14BFB; --category-badge-text-color: #000000; --parent-category-badge-color: #C14BFB;" data-parent-category-id="171" data-drop-close="true" class="badge-category --style-square --has-parent" title="Elixir Questions / Help"><span class="badge-category__name">Questions</span></span></a>
    </div>
  </div>
  <blockquote>
    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 <a href="https://caniuse.com/es6-module-dynamic-import" rel="noopener nofollow ugc">ESM modules and dynamic import</a>. 
To my surprise, asking <a href="https://gemini.google.com/share/4e99ee866bb5" rel="noopener nofollow ugc">Gemini 3 produced a reasonable output</a>, hinting at the right things. In a nutshell: 

Updat…
  </blockquote>
</aside>
 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="378840" data-batch-url="/posts/batch_likers">
                        0
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/has-anyone-used-lazy-loading-in-a-phoenix-live-view-project/32039/12">Post #11</a>
	                </div>
	            </div>
              <div id="likers-container-378840" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="378840"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-last-post cat-last-post" title="Last post!"></div>
  </section>
</div>
</template></turbo-stream><turbo-stream action="replace" target="load-more-container"><template><div id="load-more-container" class="load-more-container">
    <span class="all-loaded">— All posts loaded —</span>
</div></template></turbo-stream>