Wondering if anyone has found a way to use
mix phx.digest play nicely on a project that uses (modern) browser-native es6 modules (e.g. no webpack/rollup bundling) - with http2 gaining traction using native modules in the browser can be beneficial, but the cache manifest capability of
mix phx.digest don’t appear to handle this well.
app.js imports another module via
import ./foo.js and that import statement will need to be replaced with
import ./foo.[digest].js. I see that the phoenix digester does do some (limited) search/replace on the .js contents to modify any
//# sourceMappingURL=app.js.map at the tail of the modules - was wondering if there is any way to make it also replace the
import statements at the top of the module as well?
If not, I guess I’ll need to abandon using
mix phx.digest and take the hit of setting up a front end build system (webpack/rollup/brunch) to perform the digest step and then I’ll have to make that system generate a phoenix compatible
cache_manifest.json ? Or I guess not use
Routes.static_path(...) at all and roll my own helper? Just wondering what approach others have taken.
For reference, the simplest example of this is a new phoenix project with a layout template:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"/> <title>Phoenix Framework</title> <script type="module" src="<%= Routes.static_path(@conn, "/js/app.js") %>"></script> </head> <body> <%= @inner_content %> </body> </html>
import foo from './foo.js' console.log('app loaded') console.log('foo is ' + value)
console.log('foo loaded') export default 'hello world'
If you run this in production…
> mix phx.digest > MIX_ENV=prod mix phx.server
You can see (in browser network panel) that the main
app.js is loaded via its digested version
app.[digest].js , but
module.js is loaded by it’s regular name.
Note, I recognize there are pros/cons to native modules vs bundling, but that’s a different topic.