Cannot figure out a good workflow for a Shopify site...

[twilson90]

I have my main script, app.js, which is served on every page.
Then I have lots of individual components consisting of html, css + js. Many of them are only served on specific pages and they refer to their own exported individual JS files.

Ideally I would like to use es imports in these components (import app from "../app.js") to refer to a dependant pre-loaded module.

Here's the issue...
I can't use es imports because the site needs to serve older browsers, and I can't use systemjs because on Shopify every JS file is requested with an id search parameter that can only generated by the Liquid pre-processor. The wrong id (or no id) means you get served the original version of the file uploaded with the same name. SystemJS loads dynamic imports or dependencies without this id parameter, so it fetches and evaluates the oldest version of a script that might already be loaded.
Also consider all assets (js, css, images) must exist in a single assets directory.

The best I can come up with is to rollup app.js and each component .js file as individual entries and output into iife format. This however causes a lot of unnecessary bloat as it duplicates many corejs definitions and shims across components.

Is there a better approach?
Any advice would be appreciated.