I created a script to split an Elm bundle into one ESM per program, each importing the common code from a single shared file (demo).
How does it work?
By post-processing the generated Elm bundle, see this explanation post.
Usage
# Compile multiple Elm programs into one bundle
elm make --optimize --output=examples.js src/Clock.elm src/TextField.elm src/Quotes.elm
# split the bundle
npx split-elm-bundle examples.js
And then you can import a program e.g. like this:
<!doctype html>
<main id="elm"></main>
<script type="module">
import { Clock } from './examples.Clock.mjs';
const app = Clock.init({ node: document.getElementById('elm') });
</script>
Is the tool useful? It depends 
Bundle splitting is very common in JS frontend framework, but so far Elm did not do it. The question pops up from time to time but usually the advice is not to worry about it.
In general, our bundle sizes are quite small
Since 2018, we usually get small bundles without the headache.
For instance the Elm implementation of TodoMVC weighs 9kb (if uglified), and the Elm realworld example weighs 29kb. For comparison the React runtime alone weighs 32kb (back in 2018).
From the list of maintained realworld examples, I looked at a few react versions and this one seems to be one of the smallest ones (in bundle size), and generates two files totaling 85kb (2.a9e8cf08.chunk.js 77kb and main.7edcaa81.chunk.js 9kb).
All numbers assume that the JS code was minified (e.g. with uglify-js or terser) and gzipped.
Works only for multiple programs that are compiled into one bundle
My approach splits per Elm program. So if you donât have multiple programs that the user is likely to open, then this kind of splitting wonât help you.
If you could split your web app into a public part and into an admin area, I would guess that most times it is better to just split the two sections into two programs and not share code, because there will be little overlap where the logged-out user browses the public part (and then later also after logging in).
If you want to compile multiple Elm programs separately, the optimizations of the Elm compiler make it hard to share code, see this explanation by @supermario.
Likely usage scenarios
When building single-page-applications it could be useful because the tool could generate necessary glue code to switch between different programs and to also share state between the different programs.
It would be also nice to have e.g. one program for the header bar with menu links that can load multiple other programs per page.
I would like to see how a tool like elm-pages or elm-land that already do a lot of code generation, could generate all the ports and js glue code to seamlessly switch between different programs.\
Allowing them not to bundle all of the pages into one program, but load only what is needed, instead.
A nicer experience could also be if some routes in a single Elm program are loaded on first use, but this would need a different kind of code generation (e.g. create a type for loading the other ESM and then making it visible after information from a port).
End?
Thanks for your attention, I would be interested in your ideas how to use such a tool or in general feedback and comments.
And in case you missed the link at the very top, hereâs the demo.