Implementing a Simple Micro‑Application Loader with Qiankun: Code Walkthrough and Sandbox Isolation

In this article we walk through a hands‑on implementation of a micro‑application loader inspired by Qiankun, focusing on how to fetch a remote HTML page, process its resources, and mount it into a host container.

We start by preparing two HTML files: a host page containing a container #container and buttons that call loadApp() and unloadApp(), and a simple micro‑app that includes Bootstrap and a login form.

The core of the loader is the loadMicroApp function:

const loadMicroApp = async (containerSelector, name, url) => {
  // fetch HTML
  const html = await (await fetch(url)).text();

  // parse template, scripts, styles
  const { template, scripts, styles } = processTpl(html);

  // embed external CSS as inline <style>
  const embedHtml = await getEmbedHtml(template, styles);

  // apply scoped CSS isolation
  const wrapped = `<div class="wrapper">${embedHtml}</div>`;
  const appElement = scopedCSSIsolation(name, wrapped);

  // mount to container
  const containerElement = document.querySelector(containerSelector);
  containerElement.appendChild(appElement);

  // execute JavaScript in sandbox
  execScripts(scripts);
};

To isolate JavaScript we create a SnapshotSandbox that records the original window state, activates before script execution, and restores any modifications afterwards. The sandbox is exposed as window.proxy and window.sandbox for later use.

CSS isolation is achieved by converting each external <link> into a comment placeholder, fetching the linked stylesheet, and then wrapping the original selectors with a unique attribute selector like div[data-app-name="microApp"]. The helper scopedCSSIsolation parses the HTML, adds the data attribute, and rewrites the CSS rules accordingly.

Resource processing is split into three utilities:

function processTpl(html) { /* extracts template, scripts, and style links */ }
function getEmbedHtml(template, styles) { /* fetches external CSS and replaces placeholders with <style> tags */ }
function getExternalScripts(scripts) { /* fetches external JS or returns inline code */ }

After mounting, the micro‑app’s CSS is inlined and scoped, while its JavaScript runs inside the sandbox, preventing global side effects. The article also discusses common pitfalls such as the need for an explicit entry file, incomplete isolation when using scoped CSS, and the challenges of integrating with routing frameworks like single‑spa.

Finally, the author summarizes that loading a micro‑application essentially involves fetching HTML, converting <link> tags to <style> for CSS isolation, and executing JavaScript within a sandbox, while being aware of entry‑point and isolation limitations.