文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >专栏 >【微前端】singleSpa&importHTMLEntry（流程图）源码解析

【微前端】singleSpa&importHTMLEntry（流程图）源码解析

原创
作者头像
曾高飞
发布于 2025-05-22 01:33:39
发布于 2025-05-22 01:33:39
1790
举报

single-spa v5.9.3

通过轻量级路由劫持和状态机设计，实现微前端的动态加载与隔离，主要实现

  • 路由管理：hashchange、popstate、history.pushState、history.replaceState进行劫持，路由变化时，触发 reroute()
  • 子应用状态管理：不同执行逻辑转化不同的状态，比如
    • 加载流程：toLoadPromise→toBootstrapPromise→toMountPromise
    • 卸载流程：toUnmountPromise→toUnloadPromise
  • 子应用生命周期触发：
    • app.bootstrap()：初始化时仅执行一次
    • app.mount()：应用激活时触发
    • app.unmount()：应用从激活变为非激活状态时触发
    • app.unload()：最终卸载时触发一次

single-spa 采用 JS Entry 的方式接入微前端

我们需要在基座中注册子应用，比如下面代码中，我们注册了对应的映射路径 path 以及对应的加载的方法

代码语言：javascript
复制
registerApplication({
  name: "app1",
  app: loadApp(url),
  activeWhen: activeWhen("/app1"),
  customProps: {},
});

整体流程图

1. registerApplication()

在基座初始化时，会调用 registerApplication() 进行子应用的注册

从下面的源码我可以知道，主要执行：

  • 格式化用户传递的子应用配置参数：sanitizeArguments()
  • 将子应用加入到 apps 中
  • 如果是浏览器，则触发
    • ensureJQuerySupport()：增加 JQuery的支持
    • reroute()：统一处理路由的方法
代码语言：javascript
复制
function registerApplication(
  appNameOrConfig,
  appOrLoadApp,
  activeWhen,
  customProps
) {
  var registration = sanitizeArguments(
    appNameOrConfig,
    appOrLoadApp,
    activeWhen,
    customProps
  );
  apps.push(
    assign(
      {
        loadErrorTime: null,
        status: NOT_LOADED,
        parcels: {},
        devtools: {
          overlays: {
            options: {},
            selectors: [],
          },
        },
      },
      registration
    )
  );
  if (isInBrowser) {
    ensureJQuerySupport();
    reroute();
  }
}

reroute()

  • 状态计算：通过 getAppChanges() 根据当前的 URL 筛选出需要 加载/卸载 的应用，主要分为 4 种类型
  • 根据是否已经触发 start()，从而决定要触发
    • loadApps()： 加载应用资源，没有其他逻辑
    • performAppChanges()：卸载非 active 状态的应用（调用 umount 生命周期） + 加载并挂载 active 子应用
代码语言：javascript
复制
function reroute() {
  if (appChangeUnderway) {
    return new Promise(function (resolve, reject) {
      peopleWaitingOnAppChange.push({
        resolve: resolve,
        reject: reject,
        eventArguments: eventArguments,
      });
    });
  }
  var { appsToUnload, appsToUnmount, appsToLoad, appsToMount } =
    getAppChanges();
  if (isStarted()) {
    appChangeUnderway = true;
    appsThatChanged = appsToUnload.concat(
      appsToLoad,
      appsToUnmount,
      appsToMount
    );
    return performAppChanges();
  } else {
    appsThatChanged = appsToLoad;
    return loadApps();
  }
}
1.1 getAppChanges()

根据目前 app.status 的状态进行不同数组数据的组装

  • appsToLoad
  • appsToUnload
  • appsToMount
  • appsToUnmount
代码语言：javascript
复制
apps.forEach(function (app) {
  var appShouldBeActive =
    app.status !== SKIP_BECAUSE_BROKEN && shouldBeActive(app);
  switch (app.status) {
    case LOAD_ERROR:
      if (appShouldBeActive && currentTime - app.loadErrorTime >= 200) {
        appsToLoad.push(app);
      }
      break;
    case NOT_LOADED:
    case LOADING_SOURCE_CODE:
      if (appShouldBeActive) {
        appsToLoad.push(app);
      }
      break;
    case NOT_BOOTSTRAPPED:
    case NOT_MOUNTED:
      if (!appShouldBeActive && getAppUnloadInfo(toName(app))) {
        appsToUnload.push(app);
      } else if (appShouldBeActive) {
        appsToMount.push(app);
      }
      break;
    case MOUNTED:
      if (!appShouldBeActive) {
        appsToUnmount.push(app);
      }
      break;
    // all other statuses are ignored
  }
});
1.2 loadApps()

在 loadApps() 中，就是遍历 appsToLoad 数组 => toLoadPromise(app)，本质就是触发 app.loadApp()进行子应用的加载

代码语言：javascript
复制
function loadApps() {
  return Promise.resolve().then(function () {
    var loadPromises = appsToLoad.map(toLoadPromise);
    return (
      Promise.all(loadPromises)
        .then(callAllEventListeners)
        // there are no mounted apps, before start() is called, so we always return []
        .then(function () {
          return [];
        })
        .catch(function (err) {
          callAllEventListeners();
          throw err;
        })
    );
  });
}
1.2.1 toLoadPromise()

触发 app.loadApp()进行子应用的加载

需要子应用提供一个 loadApp()并且返回 Promise

状态改为 NOT_BOOTSTRAPPED

代码语言：javascript
复制
function toLoadPromise(app) {
  return Promise.resolve().then(function () {
    if (app.loadPromise) {
      return app.loadPromise;
    }
    if (app.status !== NOT_LOADED && app.status !== LOAD_ERROR) {
      return app;
    }
    app.status = LOADING_SOURCE_CODE;
    var appOpts, isUserErr;
    return (app.loadPromise = Promise.resolve()
      .then(function () {
        var loadPromise = app.loadApp(getProps(app));
        return loadPromise.then(function (val) {
          app.loadErrorTime = null;
          appOpts = val;
          app.status = NOT_BOOTSTRAPPED;
          app.bootstrap = flattenFnArray(appOpts, "bootstrap");
          app.mount = flattenFnArray(appOpts, "mount");
          app.unmount = flattenFnArray(appOpts, "unmount");
          app.unload = flattenFnArray(appOpts, "unload");
          app.timeouts = ensureValidAppTimeouts(appOpts.timeouts);
          delete app.loadPromise;
          return app;
        });
      })
      .catch(function (err) {
        //...
      }));
  });
}

2. 监听路由变化

single-spa 源码中有自动执行的一系列代码：

  • 监听 hashchange 和 popstate 变化，触发urlReroute()->reroute()
  • 劫持 window.addEventListener 和 window.removeEventListener，将外部应用通过注册的 ["hashchange", "popstate"] 的监听方法 放入到 capturedEventListeners 中，在下面的 unmountAllPromise.then() 之后才会调用 capturedEventListeners 存储的方法执行
  • 重写 history.pushState() 和 history.replaceState() 方法，在原来的基础上增加 window.dispatchEvent(createPopStateEvent(window.history.state, methodName)) ，从而触发第一步的 popstate 监听，从而触发 urlReroute()->reroute() 进行子应用路由的状态同步

总结：

  • 路由变化触发微前端子应用加载
  • pushState 和 replaceState 改变路由触发微前端子应用加载
  • 阻止外部的hashchange、popstate对应的监听方法直接执行，而是等待微前端执行后才触发这些方法
代码语言：javascript
复制
var routingEventsListeningTo = ["hashchange", "popstate"];
if (isInBrowser) {
  window.addEventListener("hashchange", urlReroute);
  window.addEventListener("popstate", urlReroute);

  var originalAddEventListener = window.addEventListener;
  var originalRemoveEventListener = window.removeEventListener;
  window.addEventListener = function (eventName, fn) {
    if (typeof fn === "function") {
      if (
        routingEventsListeningTo.indexOf(eventName) >= 0 &&
        !find(capturedEventListeners[eventName], function (listener) {
          return listener === fn;
        })
      ) {
        capturedEventListeners[eventName].push(fn);
        return;
      }
    }
    return originalAddEventListener.apply(this, arguments);
  };
  window.removeEventListener = function (eventName, listenerFn) {
    //...
  };
  window.history.pushState = patchedUpdateState(
    window.history.pushState,
    "pushState"
  );
  window.history.replaceState = patchedUpdateState(
    window.history.replaceState,
    "replaceState"
  );
  if (window.singleSpaNavigate) {
    //...
  } else {
    window.singleSpaNavigate = navigateToUrl;
  }
}

function urlReroute() {
  reroute([], arguments);
}

function callAllEventListeners() {
  pendingPromises.forEach(function (pendingPromise) {
    callCapturedEventListeners(pendingPromise.eventArguments);
  });
  callCapturedEventListeners(eventArguments);
}

3. start()启动开始状态

当基座主动触发 single-spa 的 start() 方法时

代码语言：javascript
复制
function start(opts) {
  started = true;
  if (opts && opts.urlRerouteOnly) {
    setUrlRerouteOnly(opts.urlRerouteOnly);
  }
  if (isInBrowser) {
    reroute();
  }
}

此时已经在监听路由变化，然后进行 active 子应用的挂载 performAppChanges()

代码语言：javascript
复制
function reroute() {
  if (appChangeUnderway) {
    return new Promise(function (resolve, reject) {
      peopleWaitingOnAppChange.push({
        resolve: resolve,
        reject: reject,
        eventArguments: eventArguments,
      });
    });
  }
  var { appsToUnload, appsToUnmount, appsToLoad, appsToMount } =
    getAppChanges();
  if (isStarted()) {
    appChangeUnderway = true;
    appsThatChanged = appsToUnload.concat(
      appsToLoad,
      appsToUnmount,
      appsToMount
    );
    return performAppChanges();
  } else {
    appsThatChanged = appsToLoad;
    return loadApps();
  }
}
3.1 getAppChanges()

根据目前 app.status 的状态进行不同数组数据的组装

  • appsToLoad
  • appsToUnload
  • appsToMount
  • appsToUnmount
代码语言：javascript
复制
apps.forEach(function (app) {
  var appShouldBeActive =
    app.status !== SKIP_BECAUSE_BROKEN && shouldBeActive(app);
  switch (app.status) {
    case LOAD_ERROR:
      if (appShouldBeActive && currentTime - app.loadErrorTime >= 200) {
        appsToLoad.push(app);
      }
      break;
    case NOT_LOADED:
    case LOADING_SOURCE_CODE:
      if (appShouldBeActive) {
        appsToLoad.push(app);
      }
      break;
    case NOT_BOOTSTRAPPED:
    case NOT_MOUNTED:
      if (!appShouldBeActive && getAppUnloadInfo(toName(app))) {
        appsToUnload.push(app);
      } else if (appShouldBeActive) {
        appsToMount.push(app);
      }
      break;
    case MOUNTED:
      if (!appShouldBeActive) {
        appsToUnmount.push(app);
      }
      break;
    // all other statuses are ignored
  }
});
3.2 performAppChanges()

而当 start() 方法触发后，started 设置为 true， 标志着应用从 初始化注册应用（加载应用）的模式进入到 运行阶段（监听路由变化）

此时触发 reroute()，则进入 performAppChanges()

urlRerouteOnly控制路由触发规则：

  • urlRerouteOnly=true：用户点击或者使用 API 才会触发 reroute()
  • urlRerouteOnly=false：任何 history.pushState() 的调用都会触发 reroute()
代码语言：javascript
复制
function start(opts) {
  started = true;
  if (opts && opts.urlRerouteOnly) {
    setUrlRerouteOnly(opts.urlRerouteOnly);
  }
  if (isInBrowser) {
    reroute();
  }
}

在 performAppChanges() 中，先组装出需要卸载的子应用

代码语言：javascript
复制
var unloadPromises = appsToUnload.map(toUnloadPromise);
var unmountUnloadPromises = appsToUnmount
  .map(toUnmountPromise)
  .map(function (unmountPromise) {
    return unmountPromise.then(toUnloadPromise);
  });
var allUnmountPromises = unmountUnloadPromises.concat(unloadPromises);
var unmountAllPromise = Promise.all(allUnmountPromises);

再组装出需要加载的应用

代码语言：javascript
复制
/* We load and bootstrap apps while other apps are unmounting, but we
 * wait to mount the app until all apps are finishing unmounting
 */
var loadThenMountPromises = appsToLoad.map(function (app) {
  return toLoadPromise(app).then(function (app) {
    return tryToBootstrapAndMount(app, unmountAllPromise);
  });
});
代码语言：javascript
复制
/* These are the apps that are already bootstrapped and just need
 * to be mounted. They each wait for all unmounting apps to finish up
 * before they mount.
 */
var mountPromises = appsToMount
  .filter(function (appToMount) {
    return appsToLoad.indexOf(appToMount) < 0;
  })
  .map(function (appToMount) {
    return tryToBootstrapAndMount(appToMount, unmountAllPromise);
  });

先触发 unmountAllPromise ，然后再触发 loadThenMountPromises.concat(mountPromises)，最终全部完成后触发finishUpAndReturn

代码语言：javascript
复制
return unmountAllPromise
  .catch(function (err) {
    callAllEventListeners();
    throw err;
  })
  .then(function () {
    /* Now that the apps that needed to be unmounted are unmounted, their DOM navigation
     * events (like hashchange or popstate) should have been cleaned up. So it's safe
     * to let the remaining captured event listeners to handle about the DOM event.
     */
    callAllEventListeners();
    return Promise.all(loadThenMountPromises.concat(mountPromises))
      .catch(function (err) {
        pendingPromises.forEach(function (promise) {
          return promise.reject(err);
        });
        throw err;
      })
      .then(finishUpAndReturn);
  });

在上面的方法中，我们看到了很多封装的方法，比如toLoadPromise()、tryToBootstrapAndMount()、toUnloadPromise()、finishUpAndReturn()，接下来我们将展开分析

3.2.1 tryToBootstrapAndMount()

当用户目前的路由是 /app1，导航到 /app2时：

  • 调用 app.activeWhen() 进行子应用状态的检测（需要子应用提供实现方法），shouldBeActive(app2) 返回 true
  • 触发 toBootstrapPromise(app2) 更改状态为 BOOTSTRAPPING，并且触发子应用提供的 app2.bootstrap() 生命周期方法 => 更改状态为 NOT_MOUNTED
  • 触发传入的unmountAllPromise，进行 /app1 卸载，然后再触发 toMountPromise(app2) 执行子应用提供的 app2.mount() 生命周期方法，然后更改状态为 MOUNTED

如果卸载完成 /app1 后，我们再次检测 shouldBeActive(app2) 的时候发现路由改变，不是 /app2，那么 app2 停止挂载，直接返回 app2，状态仍然保留在 toBootstrapPromise(app2) 时的 NOT_MOUNTED

代码语言：javascript
复制
function tryToBootstrapAndMount(app, unmountAllPromise) {
  if (shouldBeActive(app)) {
    return toBootstrapPromise(app).then(function (app) {
      return unmountAllPromise.then(function () {
        return shouldBeActive(app) ? toMountPromise(app) : app;
      });
    });
  } else {
    return unmountAllPromise.then(function () {
      return app;
    });
  }
}
function shouldBeActive(app) {
  return app.activeWhen(window.location);
}
function toBootstrapPromise(appOrParcel, hardFail) {
  return Promise.resolve().then(function () {
    if (appOrParcel.status !== NOT_BOOTSTRAPPED) {
      return appOrParcel;
    }
    appOrParcel.status = BOOTSTRAPPING;
    if (!appOrParcel.bootstrap) {
      // Default implementation of bootstrap
      return Promise.resolve().then(successfulBootstrap);
    }
    return reasonableTime(appOrParcel, "bootstrap")
      .then(successfulBootstrap)
      .catch(function (err) {
        //...
      });
  });
  function successfulBootstrap() {
    appOrParcel.status = NOT_MOUNTED;
    return appOrParcel;
  }
}
function toMountPromise(appOrParcel, hardFail) {
  return Promise.resolve().then(function () {
    return reasonableTime(appOrParcel, "mount")
      .then(function () {
        appOrParcel.status = MOUNTED;
        //...
        return appOrParcel;
      })
      .catch(function (err) {
        //...
      });
  });
}
3.2.2 toUnloadPromise()

逻辑也非常简单，就是触发子应用提供的 app2.unload() 生命周期方法，将状态改为 UNLOADING => 将状态改为 NOT_LOADED

代码语言：javascript
复制
var appsToUnload = {};
function toUnloadPromise(app) {
  return Promise.resolve().then(function () {
    var unloadInfo = appsToUnload[toName(app)];

    if (app.status === NOT_LOADED) {
      finishUnloadingApp(app, unloadInfo);
      return app;
    }
    if (app.status === UNLOADING) {
      return unloadInfo.promise.then(function () {
        return app;
      });
    }
    if (app.status !== NOT_MOUNTED && app.status !== LOAD_ERROR) {
      return app;
    }
    var unloadPromise =
      app.status === LOAD_ERROR
        ? Promise.resolve()
        : reasonableTime(app, "unload");
    app.status = UNLOADING;
    return unloadPromise
      .then(function () {
        finishUnloadingApp(app, unloadInfo);
        return app;
      })
      .catch(function (err) {
        errorUnloadingApp(app, unloadInfo, err);
        return app;
      });
  });
}
function finishUnloadingApp(app, unloadInfo) {
  delete appsToUnload[toName(app)];
  delete app.bootstrap;
  delete app.mount;
  delete app.unmount;
  delete app.unload;
  app.status = NOT_LOADED;
  unloadInfo.resolve();
}
3.3.3 finishUpAndReturn()
  • 返回已经挂载应用的列表
  • 处理等待中的 pendingPromises
  • 触发全局事件通知
  • 重置全局状态 appChangeUnderway = false
  • 检测是否有未处理的后续请求，如果有，则重新触发 reroute() 处理
代码语言：javascript
复制
function finishUpAndReturn() {
  var returnValue = getMountedApps();
  pendingPromises.forEach(function (promise) {
    return promise.resolve(returnValue);
  });
  var appChangeEventName =
    appsThatChanged.length === 0
      ? "single-spa:no-app-change"
      : "single-spa:app-change";
  window.dispatchEvent(
    new customEvent(appChangeEventName, getCustomEventDetail())
  );
  window.dispatchEvent(
    new customEvent("single-spa:routing-event", getCustomEventDetail())
  );

  appChangeUnderway = false;
  if (peopleWaitingOnAppChange.length > 0) {
    var nextPendingPromises = peopleWaitingOnAppChange;
    peopleWaitingOnAppChange = [];
    reroute(nextPendingPromises);
  }
  return returnValue;
}

import-html-entry v1.17.0

假设我们要转化的 index.html 为：

代码语言：javascript
复制
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Hello Micro Frontend</h1>
    <script src="app.js" entry></script>
    <script src="async.js" async></script>
    <script>console.log('Inline script');</script>
</body>
</html>

style.css 的具体内容为：

代码语言：javascript
复制
body { background-color: lightblue; }

app.js 内容为：

代码语言：javascript
复制
// 子应用导出的生命周期钩子
export function bootstrap() {
  console.log("Sub app bootstrap");
}
export function mount() {
  console.log("Sub app mounted");
}
bootstrap();

**async.js** 内容为：

代码语言：javascript
复制
console.log("Async script loaded");

我们在外部使用这个库一般直接使用 importEntry() 获取子应用的数据

在我们这个示例中，会传入一个 entry = "index.html"，因此会直接走 importHTML()

代码语言：javascript
复制
function importEntry(entry, opts = {}) {
  const {
    fetch = defaultFetch,
    getTemplate = defaultGetTemplate,
    postProcessTemplate,
  } = opts;
  const getPublicPath =
    opts.getPublicPath || opts.getDomain || defaultGetPublicPath;

  // html entry
  if (typeof entry === "string") {
    return importHTML(entry, {
      fetch,
      getPublicPath,
      getTemplate,
      postProcessTemplate,
    });
  }

  // config entry
  if (Array.isArray(entry.scripts) || Array.isArray(entry.styles)) {
    //...
  } else {
    throw new SyntaxError("entry scripts or styles should be array!");
  }
}

从下面代码可以知道，主要分为几个步骤：

  • 获取 HTML 内容：通过fetch直接请求对应的 https 得到对应的 HTML 字符串（也就是我们上面示例的 index.html 内容）
  • 解析 HTML：调用 processTpl() 解析 HTML 得到
    • scripts = ["/app.js ", "<script>console.log('Inline script');</script>"]
    • entry = "[/app.js](/app.js) "
    • styles = ["/style.css "]
  • 将 CSS 样式进行内联：在 getEmbedHTML() 下载 style.css 的内容，替换 template 模板中 <link> 为 <style> 标签
代码语言：javascript
复制
function importHTML(url, opts = {}) {
  //...
  return (
    embedHTMLCache[url] ||
    (embedHTMLCache[url] = fetch(url)
      .then((response) => readResAsString(response, autoDecodeResponse))
      .then((html) => {
        const assetPublicPath = getPublicPath(url);
        const { template, scripts, entry, styles } = processTpl(
          getTemplate(html),
          assetPublicPath,
          postProcessTemplate
        );

        return getEmbedHTML(template, styles, { fetch }).then((embedHTML) => ({
          template: embedHTML,
          assetPublicPath,
          getExternalScripts: () => getExternalScripts(scripts, fetch),
          getExternalStyleSheets: () => getExternalStyleSheets(styles, fetch),
          execScripts: (proxy, strictGlobal, opts = {}) => {
            if (!scripts.length) {
              return Promise.resolve();
            }
            return execScripts(entry, scripts, proxy, {
              fetch,
              strictGlobal,
              ...opts,
            });
          },
        }));
      }))
  );
}

1. processTpl()

processTpl() 在上面的分析中，我们可以知道，就是用来解析 HTML，得到：

  • scripts = ["/app.js ", "<script>console.log('Inline script');</script>"]
  • entry = "[/app.js](/app.js) "
  • styles = ["/style.css "]

那具体是如何运行的呢？

1.1 移除 HTML 注释
代码语言：javascript
复制
const HTML_COMMENT_REGEX = /<!--([\s\S]*?)-->/g;

.replace(HTML_COMMENT_REGEX, '')
1.2 处理 <link> 标签

从下面的正则表达式可以知道，主要分为：

  • 处理<link rel="stylesheet">：提取出 href 并且转为绝对路径，然后进行两种类型的注释代码转化：
    • 检测是否有 ignore 标记，通过 genIgnoreAssetReplaceSymbol() 转化为 <!-- ignore asset ${url || 'file'} replaced by import-html-entry -->
    • 添加到 styles 数组中，然后通过 genLinkReplaceSymbol() 转化为 <!-- ${preloadOrPrefetch ? 'prefetch/preload' : ''} link ${linkHref} replaced by import-html-entry -->
  • 处理预加载/预取资源：若匹配到 rel="preload" 或 rel="prefetch" 且非字体资源，则通过 genLinkReplaceSymbol()转化为占位符注释
代码语言：javascript
复制
const LINK_TAG_REGEX = /<(link)\s+.*?>/isg;
const STYLE_TYPE_REGEX = /\s+rel=('|")?stylesheet\1.*/;
const LINK_IGNORE_REGEX = /<link(\s+|\s+.+\s+)ignore(\s*|\s+.*|=.*)>/is;
const LINK_PRELOAD_OR_PREFETCH_REGEX = /\srel=('|")?(preload|prefetch)\1/;
const LINK_HREF_REGEX = /.*\shref=('|")?([^>'"\s]+)/;
const LINK_AS_FONT = /.*\sas=('|")?font\1.*/;

.replace(LINK_TAG_REGEX, match => {
    /*
    change the css link
    */
    const styleType = !!match.match(STYLE_TYPE_REGEX);
    if (styleType) {

        const styleHref = match.match(STYLE_HREF_REGEX);
        const styleIgnore = match.match(LINK_IGNORE_REGEX);

        if (styleHref) {

            const href = styleHref && styleHref[2];
            let newHref = href;

            if (href && !hasProtocol(href)) {
                newHref = getEntirePath(href, baseURI);
            }
            if (styleIgnore) {
                return genIgnoreAssetReplaceSymbol(newHref);
            }

            newHref = parseUrl(newHref);
            styles.push(newHref);
            return genLinkReplaceSymbol(newHref);
        }
    }

    const preloadOrPrefetchType = match.match(LINK_PRELOAD_OR_PREFETCH_REGEX) && match.match(LINK_HREF_REGEX) && !match.match(LINK_AS_FONT);
    if (preloadOrPrefetchType) {
        const [, , linkHref] = match.match(LINK_HREF_REGEX);
        return genLinkReplaceSymbol(linkHref, true);
    }

    return match;
})
1.3 处理 <style> 标签

如果 <style> 标签中包含 ignore 属性，则通过 genIgnoreAssetReplaceSymbol() 转化为 <!-- ignore asset ${url || 'file'} replaced by import-html-entry -->，否则直接返回原来的值

代码语言：javascript
复制
const STYLE_TAG_REGEX = /<style[^>]*>[\s\S]*?<\/style>/gi;

.replace(STYLE_TAG_REGEX, match => {
    if (STYLE_IGNORE_REGEX.test(match)) {
        return genIgnoreAssetReplaceSymbol('style file');
    }
    return match;
})
1.4 处理 **<script>** 标签

分为external script（匹配到src属性或者匹配到<script>并且不具备type="text/ng-template"属性）和 inline script两种情况进行分析

在解析 HTML 模板时，忽略 Angular 的 **ng-template** 标签 ，仅提取需要执行的脚本标签

代码语言：javascript
复制
const SCRIPT_TAG_REGEX = /<(script)\s+((?!type=('|")text\/ng-template\3).)*?>.*?<\/\1>/is;
const SCRIPT_SRC_REGEX = /.*\ssrc=('|")?([^>'"\s]+)/;

.replace(ALL_SCRIPT_REGEX, (match, scriptTag) => {
  if (SCRIPT_TAG_REGEX.test(match) && scriptTag.match(SCRIPT_SRC_REGEX)) {
    //...
  } else {
    //...
  }
}
1.4.1 external script

将相对路径的 matchedScriptSrc 通过 getEntirePath() 转化为绝对路径，并且使用 parseUrl() 标准化拿到标准化后的 src

然后分为 3 种情况进行处理：

  • 如果包含 ignore 属性，则通过 genIgnoreAssetReplaceSymbol() 转化为注释代码
  • 如果浏览器不支持 module 但是<script type="module">或者浏览器支持 module 但是 <script nomodule>，则通过 genModuleScriptReplayceSymbol() 转化为注释代码
  • 提取出 async 和 crossorigin 属性，将当前 <script> 添加到 scripts数组中，然后通过 genScriptReplaceSymbol() 转化为注释代码
代码语言：javascript
复制
if (matchedScriptSrc) {
  if (!hasProtocol(matchedScriptSrc)) {
    matchedScriptSrc = getEntirePath(matchedScriptSrc, baseURI);
  }
  matchedScriptSrc = parseUrl(matchedScriptSrc);
}
entry = entry || (matchedScriptEntry && matchedScriptSrc);

if (scriptIgnore) {
  return genIgnoreAssetReplaceSymbol(matchedScriptSrc || "js file");
}

const moduleScriptIgnore =
  (moduleSupport && !!scriptTag.match(SCRIPT_NO_MODULE_REGEX)) ||
  (!moduleSupport && !!scriptTag.match(SCRIPT_MODULE_REGEX));
if (moduleScriptIgnore) {
  return genModuleScriptReplaceSymbol(
    matchedScriptSrc || "js file",
    moduleSupport
  );
}

if (matchedScriptSrc) {
  const asyncScript = !!scriptTag.match(SCRIPT_ASYNC_REGEX);
  const crossOriginScript = !!scriptTag.match(SCRIPT_CROSSORIGIN_REGEX);
  scripts.push(
    asyncScript || crossOriginScript
      ? {
          async: asyncScript,
          src: matchedScriptSrc,
          crossOrigin: crossOriginScript,
        }
      : matchedScriptSrc
  );
  return genScriptReplaceSymbol(
    matchedScriptSrc,
    asyncScript,
    crossOriginScript
  );
}
return match;
1.4.2 inline script
  • 如果包含 ignore 属性，则通过 genIgnoreAssetReplaceSymbol() 转化为注释代码
  • 如果浏览器不支持 module 但是<script type="module">或者浏览器支持 module 但是 <script nomodule>，则通过 genModuleScriptReplayceSymbol() 转化为注释代码
  • 如果是纯注释的代码块isPureCommentBlock() ，那么直接返回 inlineScriptReplaceSymbol，不做任何处理；否则添加到 scripts 数组中
代码语言：javascript
复制
const isPureCommentBlock = code
  .split(/[\r\n]+/)
  .every((line) => !line.trim() || line.trim().startsWith("//"));
export const inlineScriptReplaceSymbol = `<!-- inline scripts replaced by import-html-entry -->`;
if (!isPureCommentBlock) {
  scripts.push(match);
}
return inlineScriptReplaceSymbol;
1.4.3 触发 postProcessTemplate 钩子函数
代码语言：javascript
复制
let tplResult = {
  template,
  scripts,
  styles,
  // set the last script as entry if have not set
  entry: entry || scripts[scripts.length - 1],
};
if (typeof postProcessTemplate === "function") {
  tplResult = postProcessTemplate(tplResult);
}
return tplResult;

2. getEmbedHTML()

processTpl() 解析 HTML，得到：

  • scripts = ["/app.js ", "<script>console.log('Inline script');</script>"]
  • entry = "[/app.js](/app.js) "
  • styles = ["/style.css "]

源码中对应位置的代码已经被我们转化为注释代码，我们需要下载这些代码并且转化

我们通过 getExternalStyleSheets() 进行 fetch 请求拿到 styles = ["/style.css "] 的数据，返回 styleSheets=[{src, value}]

然后我们将 template 中对应的外部 CSS 替换为 <style>{styleSheet.value}</style> 的內联样式

代码语言：javascript
复制
function getEmbedHTML(template, styles, opts = {}) {
  const { fetch = defaultFetch } = opts;
  let embedHTML = template;

  return getExternalStyleSheets(styles, fetch).then((styleSheets) => {
    embedHTML = styleSheets.reduce((html, styleSheet) => {
      const styleSrc = styleSheet.src;
      const styleSheetContent = styleSheet.value;
      html = html.replace(
        genLinkReplaceSymbol(styleSrc),
        isInlineCode(styleSrc)
          ? `${styleSrc}`
          : `<style>/* ${styleSrc} */${styleSheetContent}</style>`
      );
      return html;
    }, embedHTML);
    return embedHTML;
  });
}

3. 返回值对象解析

3.1 template

替换 template 模板中 <link> 为 <style> 标签后的内容，比如

从上面分析可以知道，我们会先使用 processTpl() 获取 scripts、styles 的数据，然后下载 styles 的数据，然后转化为 <style> 替换原来 template 数据

代码语言：javascript
复制
<html>...<style>body { background-color: lightblue; }</style>...</html>
3.2 assetPublicPath

微应用的路径，比如 assetPublicPath: "https"（不包含最后的 index.html）

代码语言：javascript
复制
export function defaultGetPublicPath(entry) {
  if (typeof entry === "object") {
    return "/";
  }
  try {
    const { origin, pathname } = new URL(entry, location.href);
    const paths = pathname.split("/");
    // 移除最后一个元素
    paths.pop();
    return `${origin}${paths.join("/")}/`;
  } catch (e) {
    console.warn(e);
    return "";
  }
}
3.3 getExternalScripts

遍历所有的 js 文件

  • 如果遇到內联 js，直接返回：比如 <script>console.log('Inline script');</script>
  • 如果遇到外部 js，使用 fetch 进行 js 文件的请求下载：比如<script src="app.js" entry></script>
  • 如果遇到异步 js，也就是<script async></script>，通过 requestIdleCallback 进行延迟加载
代码语言：javascript
复制
scripts.map(async (script) => {
  if (typeof script === "string") {
    if (isInlineCode(script)) {
      // if it is inline script
      return getInlineCode(script);
    } else {
      // external script
      return fetchScript(script);
    }
  } else {
    // use idle time to load async script
    const { src, async, crossOrigin } = script;
    const fetchOpts = crossOrigin ? { credentials: "include" } : {};

    if (async) {
      return {
        src,
        async: true,
        content: new Promise((resolve, reject) =>
          requestIdleCallback(() =>
            fetchScript(src, fetchOpts).then(resolve, reject)
          )
        ),
      };
    }

    return fetchScript(src, fetchOpts);
  }
});

最终返回值为

代码语言：javascript
复制
[
  {
    src: "/app.js ",
    value: "export function bootstrap() ...bootstrap();",
  },
  {
    src: "https://www.hsbang.com/sitemap.xml ",
    async: true,
    content: Promise.resolve("console.log('Async script loaded');"),
  },
  {
    src: "<script>console.log('Inline script');</script>",
    value: "console.log('Inline script');",
  },
];
3.4 getExternalStyleSheets
代码语言：javascript
复制
styleCache[styleLink] ||
(styleCache[styleLink] = fetch(styleLink).then(response => {
  if (response.status >= 400) {
    throw new Error(`${styleLink} load failed with status ${response.status}`);
  }
  return response.text();
})
// 省略很多promise
if (result.status === 'fulfilled') {
  result.value = {
    src: styles[i],
    value: result.value,
  };
}
return result;

使用 fetch 进行样式文件的请求下载，最终形成

代码语言：javascript
复制
[
  {
    src: "/style.css ",
    value: "body { background-color: lightblue; }",
  },
];
3.5 execScripts

传入的 scripts 就是 上面分析的 getExternalScripts 的 scripts

代码语言：javascript
复制
if (!scripts.length) {
  return Promise.resolve();
}
return execScripts(entry, scripts, proxy, {
  fetch,
  strictGlobal,
  ...opts,
});

使用 getExternalScripts() 进行 js 文件的下载并存入缓存中，然后对每一个 JS 都调用 geval(scriptSrc, inlineScript)

  • entry JS：
    • noteGlobalProps() 记录微应用在执行入口脚本前的全局变量，用于后续沙箱清理
    • 触发geval()生成沙箱代码并执行，确保 JS 在代理的上下文中运行，避免全局污染
    • 触发 resolve(exports) 将 entry JS 导出对象（包含生命周期钩子函数）传递给外部
  • 同步的 JS：触发geval()生成沙箱代码并执行
  • 异步的 JS：在浏览器空闲时触发下载的方法然后再调用geval()生成沙箱代码并执行
代码语言：javascript
复制
export function execScripts(entry, scripts, proxy = window, opts = {}) {
  //...
  return getExternalScripts(scripts, fetch, entry).then((scriptsText) => {
    const geval = (scriptSrc, inlineScript) => {
      //...
    };
    function exec(scriptSrc, inlineScript, resolve) {
      if (scriptSrc === entry) {
        noteGlobalProps(strictGlobal ? proxy : window);
        geval(scriptSrc, inlineScript);
        const exports =
          proxy[getGlobalProp(strictGlobal ? proxy : window)] || {};
        resolve(exports);
      } else {
        if (typeof inlineScript === "string") {
          if (scriptSrc?.src) {
            geval(scriptSrc.src, inlineScript);
          } else {
            geval(scriptSrc, inlineScript);
          }
        } else {
          // external script marked with async
          inlineScript.async &&
            inlineScript?.content.then((downloadedScriptText) =>
              geval(inlineScript.src, downloadedScriptText)
            );
        }
      }
    }
    function schedule(i, resolvePromise) {
      if (i < scriptsText.length) {
        const script = scriptsText[i];
        const scriptSrc = script.src;
        const inlineScript = script.value;

        exec(scriptSrc, inlineScript, resolvePromise);
        // resolve the promise while the last script executed and entry not provided
        if (!entry && i === scriptsText.length - 1) {
          resolvePromise();
        } else {
          schedule(i + 1, resolvePromise);
        }
      }
    }

    return new Promise((resolve) => schedule(0, success || resolve));
  });
}
3.5.1 geval()生成沙箱代码
代码语言：javascript
复制
const rawCode = beforeExec(inlineScript, scriptSrc) || inlineScript;
const code = getExecutableScript(scriptSrc, rawCode, {
  proxy,
  strictGlobal,
  scopedGlobalVariables,
});

evalCode(scriptSrc, code);

afterExec(inlineScript, scriptSrc);

通过 getExecutableScript() 生成 sandbox 代码

代码语言：javascript
复制
(function (window, self, globalThis) {
  with (window) {
    // app.js 的原始代码
    export function bootstrap() {
      console.log("Sub app bootstrap");
    }
    export function mount() {
      console.log("Sub app mounted");
    }
    bootstrap();
  }
}).bind(proxy)(proxy, proxy, proxy);

使用 evalCode() 转化代码并缓存到 evalCache，然后强制该函数在全局上下文中执行

使用 **(0, eval)** 是一种“间接调用”方式，强制 **eval** 在全局作用域中执行，从而模拟浏览器对 **<script>** 标签的执行行为

代码语言：javascript
复制
function evalCode(scriptSrc, code) {
  const key = scriptSrc;
  if (!evalCache[key]) {
    const functionWrappedCode = `(function(){${code}})`;
    evalCache[key] = (0, eval)(functionWrappedCode);
  }
  const evalFunc = evalCache[key];
  evalFunc.call(window);
}

evalCode 示例

代码语言：javascript
复制
evalCode("app.js", 'console.log("Hello from eval"); var x = 42;');

比如上面这段代码，经过 evalCode() 转化得到 evalFunc，然后直接触发 evalFunc 的执行

代码语言：javascript
复制
(function () {
  console.log("Hello from eval");
  var x = 42;
}).call(window);

4. 总结

我们通过 processTpl() 抽离出资源数据，并且将这些资源数据代码转化为注释代码，避免重复多次加载

  • scripts = ["/app.js ", "<script>console.log('Inline script');</script>"]
  • entry = "[/app.js](/app.js) "
  • styles = ["/style.css "]

然后调用 getEmbedHTML() 先把上面得到的 styles 下载并转化为 <style></style> 內联样式替换到 template 中，然后返回一个对象数据，包括

  • template：替换了所有 styles 的模板数据
  • assetPublicPath：微应用的路径
  • getExternalScripts()：提供外部调用可以下载 scripts = ["/app.js ", "<script>console.log('Inline script');</script>"] 的方法
  • getExternalStyleSheets()：提供外部调用可以下载 styles = ["/style.css "] 的方法
  • execScripts()：执行 getExternalScripts() 下载 scripts，然后调用 geval() 生成沙箱代码并执行，确保 JS 在代理的上下文中运行，避免全局污染
代码语言：javascript
复制
function importHTML(url, opts = {}) {
  //...
  return (
    embedHTMLCache[url] ||
    (embedHTMLCache[url] = fetch(url)
      .then((response) => readResAsString(response, autoDecodeResponse))
      .then((html) => {
        const assetPublicPath = getPublicPath(url);
        const { template, scripts, entry, styles } = processTpl(
          getTemplate(html),
          assetPublicPath,
          postProcessTemplate
        );

        return getEmbedHTML(template, styles, { fetch }).then((embedHTML) => ({
          template: embedHTML,
          assetPublicPath,
          getExternalScripts: () => getExternalScripts(scripts, fetch),
          getExternalStyleSheets: () => getExternalStyleSheets(styles, fetch),
          execScripts: (proxy, strictGlobal, opts = {}) => {
            if (!scripts.length) {
              return Promise.resolve();
            }
            return execScripts(entry, scripts, proxy, {
              fetch,
              strictGlobal,
              ...opts,
            });
          },
        }));
      }))
  );
}

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

singleton

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

singleton
评论
登录后参与评论
0 条评论
热度
最新
登录 后参与评论
推荐阅读
目录
  • single-spa v5.9.3
    • 整体流程图
    • 1. registerApplication()
    • 2. 监听路由变化
    • 3. start()启动开始状态
    • import-html-entry v1.17.0
      • 1. processTpl()
      • 2. getEmbedHTML()
      • 3. 返回值对象解析
      • 4. 总结
领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档

Copyright © 2013 - 2025 Tencent Cloud.

All Rights Reserved. 腾讯云 版权所有

登录 后参与评论