Wujie 无界微前端（3）- 适用场景与简历指南

// 主应用配置
<WujieVue
  v-for="legacy in legacySystems"
  :key="legacy.name"
  v-show="currentSystem === legacy.name"
  :name="legacy.name"
  :url="legacy.url"
  :alive="false"  // 老系统不保活，避免内存问题
/>

const legacySystems = [
  { name: 'jquery-system', url: 'https://old.example.com/jquery/' },
  { name: 'angular-system', url: 'https://old.example.com/angular/' },
  { name: 'vue2-system', url: 'https://old.example.com/vue2/' }
]

<template>
  <div class="third-party-integration">
    <nav>
      <button @click="switchSystem('crm')">CRM系统</button>
      <button @click="switchSystem('erp')">ERP系统</button>
      <button @click="switchSystem('oa')">OA系统</button>
    </nav>

    <WujieVue
      :name="currentSystem"
      :url="getSystemUrl(currentSystem)"
      :props="systemProps"
    />
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

const currentSystem = ref('crm')

const systems = {
  crm: 'https://crm.external.com/',
  erp: 'https://erp.external.com/',
  oa: 'https://oa.external.com/'
}

const systemProps = computed(() => ({
  token: getToken(),
  userId: getUserId(),
  // 通过 props 传递认证信息
  auth: {
    token: getToken(),
    userId: getUserId()
  }
}))

const getSystemUrl = (name) => {
  return systems[name]
}

const switchSystem = (name) => {
  currentSystem.value = name
}
</script>

<template>
  <div class="workspace">
    <!-- 标签页 -->
    <div class="tabs">
      <div
        v-for="tab in openedTabs"
        :key="tab.name"
        :class="['tab', { active: currentTab === tab.name }]"
        @click="switchTab(tab.name)"
      >
        {{ tab.title }}
        <span class="close" @click.stop="closeTab(tab.name)">×</span>
      </div>
    </div>

    <!-- 应用容器 -->
    <div class="app-container">
      <WujieVue
        v-for="tab in openedTabs"
        :key="tab.name"
        v-show="currentTab === tab.name"
        :name="tab.name"
        :url="tab.url"
        :alive="true"  <!-- 开启保活 -->
        @activated="onAppActivated(tab)"
        @deactivated="onAppDeactivated(tab)"
      />
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const openedTabs = ref([
  { name: 'app1', title: '应用1', url: 'http://localhost:8081/' }
])

const currentTab = ref('app1')

const switchTab = (name) => {
  currentTab.value = name
}

const closeTab = (name) => {
  const index = openedTabs.value.findIndex(tab => tab.name === name)
  if (index > -1) {
    openedTabs.value.splice(index, 1)

    // 销毁应用
    import('wujie').then(({ destroyApp }) => {
      destroyApp(name)
    })

    // 切换到其他标签
    if (currentTab.value === name && openedTabs.value.length > 0) {
      currentTab.value = openedTabs.value[0].name
    }
  }
}

const onAppActivated = (tab) => {
  console.log(`${tab.title} 激活`)
  // 可以在这里刷新数据
}

const onAppDeactivated = (tab) => {
  console.log(`${tab.title} 失活`)
  // 可以在这里保存状态
}
</script>

const systems = [
  { name: 'hr', title: 'HR系统', url: 'http://hr.internal.com', tech: 'jQuery' },
  { name: 'finance', title: '财务系统', url: 'http://finance.internal.com', tech: 'AngularJS' },
  { name: 'oa', title: 'OA系统', url: 'http://oa.internal.com', tech: 'Vue2' },
  // ... 12 more systems
]

// 统一登录
const ssoToken = getSSOToken()
systems.forEach(system => {
  system.props = {
    token: ssoToken,
    logout: handleLogout
  }
})

class TenantManager {
  constructor() {
    this.tenants = new Map()
  }

  async loadTenant(tenantId) {
    // 获取租户配置
    const config = await fetch(`/api/tenants/${tenantId}/config`).then(r => r.json())

    this.tenants.set(tenantId, config)

    return config
  }

  getTenantUrl(tenantId) {
    const config = this.tenants.get(tenantId)
    return config?.url || ''
  }

  getTenantProps(tenantId) {
    const config = this.tenants.get(tenantId)
    return {
      tenantId,
      config,
      api: `/api/tenants/${tenantId}`
    }
  }
}

// 使用
const tenantManager = new TenantManager()

const currentTenant = ref(null)

onMounted(async () => {
  const tenantId = getTenantIdFromUrl()
  currentTenant.value = await tenantManager.loadTenant(tenantId)
})

class AliveManager {
  constructor() {
    this.maxAlive = 3
    this.aliveQueue = [] // LRU 队列
  }

  activate(appName) {
    // 移到队列前面
    const index = this.aliveQueue.indexOf(appName)
    if (index > -1) {
      this.aliveQueue.splice(index, 1)
    }
    this.aliveQueue.unshift(appName)

    // 超过限制，销毁最久未使用的
    if (this.aliveQueue.length > this.maxAlive) {
      const removed = this.aliveQueue.pop()
      destroyApp(removed)
    }
  }
}

<WujieVue
  name="app1"
  url="http://localhost:8081/"
  :props="{ user, token, apiBaseUrl }"
/>

const user = window.$wujie.props.user
const token = window.$wujie.props.token

// 主应用发送
bus.$emit('user-update', newUser)

// 子应用接收
window.$wujie.bus.$on('user-update', (user) => {
  console.log('用户信息更新', user)
})

const store = new WujieStore({
  user: null,
  token: null
})

// 主应用修改
store.commit('setUser', newUser)

// 所有子应用自动同步

// 1. 全局变量检测
class GlobalVarDetector {
  constructor() {
    this.snapshot = {}
  }

  takeSnapshot() {
    for (const key in window) {
      this.snapshot[key] = window[key]
    }
  }

  detect() {
    const newVars = []
    for (const key in window) {
      if (!(key in this.snapshot)) {
        newVars.push(key)
      }
    }

    if (newVars.length > 0) {
      console.warn('检测到新增全局变量', newVars)
    }
  }
}

// 2. 事件监听清理
const eventListeners = new WeakMap()

const originalAddEventListener = window.addEventListener
window.addEventListener = function(type, listener, options) {
  if (!eventListeners.has(this)) {
    eventListeners.set(this, [])
  }
  eventListeners.get(this).push({ type, listener, options })

  return originalAddEventListener.call(this, type, listener, options)
}

// 应用卸载时清理
function cleanupListeners() {
  const listeners = eventListeners.get(window) || []
  listeners.forEach(({ type, listener, options }) => {
    window.removeEventListener(type, listener, options)
  })
}

// 智能内存管理
class MemoryOptimizer {
  constructor() {
    this.threshold = 100 * 1024 * 1024 // 100MB
    this.apps = new Map()
  }

  monitor() {
    setInterval(() => {
      if (!performance.memory) return

      const { usedJSHeapSize } = performance.memory

      if (usedJSHeapSize > this.threshold) {
        this.cleanup()
      }
    }, 30000)
  }

  cleanup() {
    // 按访问时间排序
    const sorted = Array.from(this.apps.entries())
      .sort((a, b) => a[1].lastVisit - b[1].lastVisit)

    // 销毁最久未访问的应用
    if (sorted.length > 0) {
      const [appName] = sorted[0]
      destroyApp(appName)
      this.apps.delete(appName)

      console.log(`内存优化：已清理 ${appName}`)
    }
  }
}

class PermissionManager {
  constructor() {
    this.permissions = new Map()
  }

  async loadUserPermissions(userId) {
    const res = await fetch(`/api/users/${userId}/permissions`)
    const data = await res.json()

    this.permissions.set(userId, data.permissions)
  }

  hasPermission(userId, appName) {
    const permissions = this.permissions.get(userId) || []
    return permissions.includes(`app:${appName}`)
  }

  getVisibleApps(userId) {
    const allApps = getAllApps()
    return allApps.filter(app =>
      this.hasPermission(userId, app.name)
    )
  }
}

// 使用
const permissionManager = new PermissionManager()

const visibleApps = computed(() => {
  return permissionManager.getVisibleApps(currentUserId.value)
})

class PredictivePreloader {
  constructor() {
    this.history = []
    this.patterns = new Map()
  }

  recordNavigation(from, to) {
    this.history.push({ from, to, timestamp: Date.now() })

    // 分析模式
    this.analyzePattern(from, to)
  }

  analyzePattern(from, to) {
    const key = `${from}->${to}`
    const count = this.patterns.get(key) || 0
    this.patterns.set(key, count + 1)

    // 如果访问次数超过 3 次，自动预加载
    if (count >= 3) {
      this.preload(to)
    }
  }

  predict(currentApp) {
    // 预测下一个可能访问的应用
    const predictions = Array.from(this.patterns.entries())
      .filter(([key]) => key.startsWith(currentApp))
      .sort((a, b) => b[1] - a[1])

    if (predictions.length > 0) {
      const [key] = predictions[0]
      const nextApp = key.split('->')[1]
      this.preload(nextApp)
    }
  }

  preload(appName) {
    const config = getAppConfig(appName)
    if (config) {
      preloadApp(config)
      console.log(`预测式预加载: ${appName}`)
    }
  }
}

【Wujie 微前端企业门户整合】2024.05 - 2024.11

项目背景：
公司内部有 15 个系统分散在不同域名，技术栈各异（jQuery、AngularJS、Vue2/3、React），用户需要记住多个网址和账号，体验极差。需要统一整合到一个门户，但老系统无法重构。

技术选型：
对比 qiankun、Wujie、Micro-App 后选择 Wujie，核心原因：
- 子应用零改造，老系统无需任何修改
- iframe 天然隔离，技术栈差异大不怕冲突
- 保活能力强，适合多应用频繁切换
- 完整 DOM 环境，兼容性好

核心工作：

1. 技术方案设计
   - 深入研究 Wujie 原理：iframe 沙箱 + Web Component 劫持机制
   - 设计门户架构：Layout、导航、权限、SSO、通信
   - 制定接入规范：URL 规范、通信协议、错误处理

2. 统一门户开发
   - 实现响应式 Layout：支持 PC/移动端
   - 开发应用管理：动态配置、权限分配、状态监控
   - 实现 SSO：OAuth 2.0，统一认证，token 传递
   - 开发权限系统：基于 RBAC，动态菜单

3. 15 个系统接入
   - 零改造接入所有系统，配置 URL 和 props 即可
   - 处理跨域：配置 CORS、Nginx 反向代理
   - 解决兼容性：全局变量检测、事件监听清理
   - 路由同步：主应用路由与子应用联动

4. 性能优化
   - 智能预加载：分析用户行为，预测下一步操作，提前加载
   - 保活策略：LRU 算法，最多保活 5 个高频应用
   - 资源优化：CDN 加速、浏览器缓存、并行加载
   - 内存管理：监控内存占用，自动清理低频应用

5. 通信机制
   - 封装统一通信工具：props、EventBus、请求-响应
   - 实现全局状态管理：类 Vuex，主子应用状态同步
   - 开发消息中心：统一消息通知、系统公告
   - 错误上报：统一收集子应用错误

6. 工程化建设
   - CI/CD：Jenkins 自动化部署，主应用和子系统独立发布
   - 监控系统：应用加载监控、性能监控、错误告警
   - 文档中心：接入文档、API 文档、最佳实践
   - 应急响应：故障快速定位和恢复机制

技术难点：
- 老系统兼容：全局变量检测、事件监听清理、异常捕获
- 性能优化：智能预加载、保活策略、内存管理
- 权限控制：动态权限、菜单过滤、按钮级控制

技术亮点：
- 预测式预加载：根据用户行为模式预测并预加载
- 智能保活策略：LRU + 访问频率，内存可控
- 动态权限系统：RBAC，支持运行时权限变更

技术栈：
Wujie、Vue3、iframe、Web Component、OAuth 2.0、Nginx

项目成果：
- 接入效率：15 个系统零改造，开发周期从 6 个月缩短到 1 个月
- 用户体验：统一入口，单点登录，满意度从 60% 提升到 95%
- 切换速度：保活机制，常用系统切换提升 85%（2-3秒 → 100-200ms）
- 运维成本：统一部署监控，运维成本降低 70%
- 系统稳定性：完全隔离，稳定性提升 90%，故障影响面降低 95%
- 维护效率：统一管理，效率提升 60%
- 新系统接入：标准化流程，接入时间从 1 周缩短到 1 天