首页 > 互联资讯 > 网络资讯  > 

鹅厂最新开源 WebComponent + iframe 的微前端框架

微前端已经是一个非常成熟的领域了,但开发者不管采用哪个现有方案,在适配成本、样式隔离、运行性能、页面白屏、子应用通信、子应用保活、多应用激活、vite 框架支持、应用共享等用户核心诉求都或存在问题、或无法提供支持。

Web Components 是一个浏览器原生支持的组件封装技术,可以有效隔离元素之间的样式,iframe 可以给子应用提供一个原生隔离的运行环境,相比自行构造的沙箱 iframe 提供了独立的 window、document、history、location,可以更好地和外部解耦。无界微前端采用 webcomponent + iframe 的沙箱模式,在实现原生隔离的前提下比较完善地解决了上述问题。

特性

极速:极致预加载、预执行,页面秒开无白屏、丝滑般切换

强大:支持子应用保活、内嵌、去中心化通信、多应用激活

简单:框架封装, 保持普通组件使用体验一致

原生隔离:基于 WebComponent 和 iframe,原生物理隔离

原生性能:避免 with 语句运行代码,整体的运行性能接近原生

开箱即用:主、子应用无需做任何适配,开箱即用

无界优势

多应用同时激活在线:框架具备同时激活多应用,并保持这些应用路由同步的能力

组件式的使用方式:无需注册,更无需路由适配,在组件内使用,跟随组件装载、卸载

应用级别的 keep-alive:子应用开启保活模式后,应用发生切换时整个子应用的状态可以保存下来不丢失,结合预执行模式可以获得类似ssr的打开体验

纯净无污染:

无界利用iframe和webcomponent来搭建天然的js隔离沙箱和css隔离沙箱

利用iframe的history和主应用的history在同一个top-level browsing context来搭建天然的路由同步机制

副作用局限在沙箱内部,子应用切换无需任何清理工作,没有额外的切换成本

性能和体积兼具:

子应用执行性能和原生一致,子应用实例instance运行在iframe地window上下文中,避免with(proxyWindow){code}这样指定代码执行上下文导致的性能下降,但是多了实例化iframe的一次性的开销,可以通过 proload 提前实例化

体积比较轻量,借助iframe和webcomponent来实现沙箱,有效地减小了代码量

开箱即用:不管是样式的兼容、路由的处理、弹窗的处理、热更新的加载,子应用完成接入即可开箱即用无需额外处理,应用接入成本也极低

快速上手

1 安装

npm install wujie -S

2 主应用

引入:

import { bus, setupApp, preloadApp, startApp, destroyApp } from "wujie";

提示:

如果主应用是vue框架可直接使用 wujie-vue,react框架可直接使用 wujie-react

创建主应用:

setupApp({{ name: "唯一id", url: "子应用地址", exec: true, el: "容器", sync: true }})

预加载:

preloadApp({ name: "唯一id"});

启动子应用:

startApp({ name: "唯一id" });

3 子应用改造

无界对子应用的侵入非常小,在满足跨域条件下子应用可以不用改造。

前提:

子应用的资源和接口的请求都在主域名发起,所以会有跨域问题,子应用必须做 cors 设置

app.use((req, res, next) => {

  // 路径判断等等

  res.set({

    "Access-Control-Allow-Credentials": true,

    "Access-Control-Allow-Origin": req.headers.origin || "*",

    "Access-Control-Allow-Headers": "X-Requested-With,Content-Type",

    "Access-Control-Allow-Methods": "PUT,POST,GET,DELETE,OPTIONS",

    "Content-Type": "application/json; charset=utf-8",

  });

  // 其他操作

});

运行模式:

无界有三种运行模式:单例模式、保活模式、重建模式。

其中保活模式、重建模式子应用无需做任何改造工作,单例模式需要做生命周期改造。

生命周期改造:

改造入口函数:

将子应用路由的创建、实例的创建渲染挂载到window.__WUJIE_MOUNT函数上

将实例的销毁挂载到window.__WUJIE_UNMOUNT上

如果子应用的实例化是在异步函数中进行的,在定义完生命周期函数后,请务必主动调用无界的渲染函数 window.__WUJIE.mount()

示例:

vue3

if (window.__POWERED_BY_WUJIE__) {

  let instance;

  window.__WUJIE_MOUNT = () => {

    const router = createRouter({ history: createWebHistory(), routes });

    instance = createApp(App);

    instance.use(router);

    instance.mount("#app");

  };

  window.__WUJIE_UNMOUNT = () => {

    instance.unmount();

  };

} else {

  createApp(App).use(createRouter({ history: createWebHistory(), routes })).mount("#app");

}

vite

declare global {

  interface Window {

    // 是否存在无界

    __POWERED_BY_WUJIE__?: boolean;

    // 子应用mount函数

    __WUJIE_MOUNT: () => void;

    // 子应用unmount函数

    __WUJIE_UNMOUNT: () => void;

    // 子应用无界实例

    __WUJIE: { mount: () => void };

  }

}

if (window.__POWERED_BY_WUJIE__) {

  let instance: any;

  window.__WUJIE_MOUNT = () => {

    const router = createRouter({ history: createWebHistory(), routes });

    instance = createApp(App)

    instance.use(router);

    instance.mount("#app");

  };

  window.__WUJIE_UNMOUNT = () => {

    instance.unmount();

  };

  /*

    由于vite是异步加载,而无界可能采用fiber执行机制

    所以mount的调用时机无法确认,框架调用时可能vite

    还没有加载回来,这里采用主动调用防止用没有mount

    无界mount函数内置标记,不用担心重复mount

  */

  window.__WUJIE.mount()

} else {

  createApp(App).use(createRouter({ history: createWebHistory(), routes })).mount("#app");

}

react

if (window.__POWERED_BY_WUJIE__) {

  window.__WUJIE_MOUNT = () => {

    ReactDOM.render(

      <React.StrictMode>

        <App />

      </React.StrictMode>,

      document.getElementById("root")

    );

  };

  window.__WUJIE_UNMOUNT = () => {

    ReactDOM.unmountComponentAtNode(document.getElementById("root"));

  };

} else {

  ReactDOM.render(

    <React.StrictMode>

      <App />

    </React.StrictMode>,

    document.getElementById("root")

  );

}


鹅厂最新开源 WebComponent + iframe 的微前端框架由讯客互联网络资讯栏目发布,感谢您对讯客互联的认可,以及对我们原创作品以及文章的青睐,非常欢迎各位朋友分享到个人网站或者朋友圈,但转载请说明文章出处“鹅厂最新开源 WebComponent + iframe 的微前端框架