i tried the approach and unfortunately the scripts are bundled inside the app.js
from 57K initially, after refactoring - implementing this approach of loading few js components (and after digest) the app.js.gz skyrocketed to 507K
mitnik
mitnik
finally solved it
non of the above will work if you don’t do the following:
from esbuild
Note that when code splitting is disabled (i.e. the default behavior), an
import('path')expression behaves similar toPromise.resolve(require('path'))and still bundles the imported file into the entry point bundle. No additional chunks are generated in this case.
so you must first configure the esbuild inside config.exs like so:
~w(js/app.js css/quill.css --chunk-names=chunks/[name]-[hash] --bundle --outdir=../priv/static/assets --splitting --format=esm --target=es2016),
then in your template you must change the app.js type like so (type=“module” otherwise you will get errors that you can’t use imports outside a module …):
<script defer phx-track-static type="module" src={Routes.static_path(@conn, "/assets/js/app.js")}></script>
now the code will load from the generated chunks
9