How to Implement Dynamic Imports with Vite in a Nested Web Application Structure

[zero41120]

I'm facing a challenge with dynamically importing modules in a nested web application structure using Vite and looking for guidance or suggestions.

Context:

• Our infrastructure includes a "parent" website hosting assets for multiple teams. It has customer face website and a remote cdn.
• My "child" website runs the UMD format, so everything runs on 1 javascript file.
• We aim to dynamically import a third-party dependency (2MB size) only when a user initiates a feedback form submission. This dependency is infrequently used, justifying the need for code splitting to avoid loading it on every page visit.

Approach:
I change the vite.config.ts to use ES format. Then I attempted dynamic import using the ES module syntax like so

// Source 
function onFeedbackButtonClick() {
   import(`@abc/big-package`).then((m) => m.loadWidget());
}

// Vite build output
__vitePreload(()=>import("./index.6956da96.js").then(/**... **/);

The dynamic imports are referenced in the manifest.json.

Issue:

• The "parent" website manages all assets, storing scripts at path like https://{cdn-domain}/asset/{version-hash}/index.{hash}.js.
• It fetches the manifest data and injects scripts from the manifest into the page https://{customer-facing-domain}/{product-of-my-team}.
• However, for dynamic imports, Vite's generated code attempts to load resources from a path that doesn't match our "parent" website's asset structure, leading to loading failures. (https://{customer-facing-domain}/index.{hash}.js)

let name = /* read from manifest */; 
let script = document.createElement('script');
script.src = `/asset/v1711/${name}`; // Note this v1711 comes from service `jsp` template
script.type = 'module';
appendToHead(script);
// This successfully loads scripts from https://{cdn-domain}/asset/v1711/... but fails for dynamic imports.

Question:

How can I configure Vite or modify our setup to correctly handle dynamic imports in this nested web application structure, ensuring that dynamically imported modules are loaded from the correct asset path managed by the "parent" website?

[calebwaldner]

@zero41120 Did you ever come up with a solution to this? Facing similar issue.