无界-Wujie

微前端痛点与“无界”的诞生

• 痛点回首：传统微前端框架（如 qiankun）依赖 JS 劫持与运行时样式沙箱，带来了 Vite 适配困难（UMD 限制）、CSS 隔离不彻底、多页签无法无损保活等顽疾
• wujie-vue 的魔力：将复杂的微前端架构，封装成了一个简单的 Vue 组件 <WujieVue/>。引入它，就像引入一个普通的 Element-UI 组件一样自然。

无界之所以能做到“零改造成本”与“极速加载”，秘密在于它对浏览器原生特性的精妙组合：

• JS 沙箱（物理隔离）：子应用运行在无 DOM 渲染的空 <iframe> 中。全局变量互不干扰，天然支持原生 ESM（Vite 项目无需任何降级打包）。
• CSS 与 DOM 沙箱（WebComponent）：子应用的 HTML/CSS 被渲染在 Shadow DOM 内。样式绝对隔离，主、子应用样式互不影响，且能完美同屏共存。
• 连接桥梁：无界底层重定向了 iframe 内部 JS 对 DOM 的操作，让子应用误以为自己运行在一个正常的浏览器页面中。

接入及使用

安装依赖

npm install wujie-vue3

页面使用

<template>
  <div class="container">
    <WujieVue
      name="my-sub-app"
      url="http://localhost:8080/"  //根据env环境动态调整url
      :sync="true"
      :alive="true"
      :props="{ theme: 'dark' }"
    />
  </div>
</template>

## js部分
import WujieVue from "wujie-vue3";

运行模式：

1.保活模式  alive: true

• 官方定义：主应用将子应用的 alive 属性设为 true。
• 状态表现：子应用只进行一次渲染，切走时 DOM 节点和 JS 状态全部保留在内存中（仅对 WebComponent 进行热插拔），状态和路由不丢失。
• 无需改造：子应用不需要进行任何生命周期改造。

<template>
  <div class="app-container">
    <WujieVue
      name="crm-sub-app"
      url="http://localhost:8001/"
      :alive="true" 
      :sync="true"
    />
  </div>
</template>

⚠️ 性能提醒：由于子应用的 DOM 树和 JS 内存常驻，保活的子应用数量过多（例如超过 5-8 个重型应用）会导致主应用的浏览器内存占用过大。建议对高频、重度录入的子应用开启此模式，其他低频应用不推荐。

2. 单例模式  alive: false+生命周期改造

• 官方定义：主应用 alive 为 false（默认），且子应用导出了生命周期（即改造了 window.__WUJIE_MOUNT 和 window.__WUJIE_UNMOUNT）。
• 状态表现：页面切走时，调用子应用的 __WUJIE_UNMOUNT 销毁当前实例（释放 DOM）；页面切回时，调用 __WUJIE_MOUNT 渲染新的实例。
• 核心优势：因为承载子应用 JS 的 iframe 并没有被销毁，只是实例销毁了，所以二次打开时，JS 不需要重新下载和解析，挂载速度极快

<template>
  <div class="app-container">
    <WujieVue
      name="erp-sub-app"
      url="http://localhost:8002/"
      :alive="false" 
      :sync="true"
    />
  </div>
</template>

子应用需要导出 __WUJIE_MOUNT 和 __WUJIE_UNMOUNT 两个生命周期钩子，负责实例的挂载与销毁。

子应用配置：

import { createApp, App as VueApp } from "vue";
import App from "./App.vue";
import router from "./router";

let app: VueApp | null = null;

// 1. 封装挂载方法
function mount() {
  app = createApp(App);
  app.use(router);
  app.mount("#app");
}

// 2. 封装销毁方法
function unmount() {
  app?.unmount();
  app = null;
}

// 3. 接入无界生命周期
if (window.__POWERED_BY_WUJIE__) {
  window.__WUJIE_MOUNT = mount;
  window.__WUJIE_UNMOUNT = unmount;
  // 必须手动触发首次 mount
  window.__WUJIE?.mount();
} else {
  // 独立运行环境
  mount();
}

3. 重建模式   alive: false+无生命周期改造

• 官方定义：主应用 alive 为 false，且子应用完全没有做任何生命周期改造。
• 状态表现：因为子应用没有提供销毁和挂载的生命周期钩子，无界无法精细化控制它。所以每次切走页面时，无界只能采用“暴力手段”——直接销毁子应用的 WebComponent + 销毁承载 JS 的整个 iframe；切回时，重新全量创建。
• 特点：真正的零改造，但每次切换都是“冷启动”，性能最差

⚠️重建模式代价：由于每次切走都会强制销毁并重新创建 <iframe>（包含里面的 JS 执行上下文、运行时变量），重新切回时需要重新加载 HTML/JS、重新进行 JS 词法解析、重新执行生命周期，性能最差，白屏时间最长。

待补充.....