无界 Wujie 微前端实战三步接入、三种模式与高频坑的完整指南【免费下载链接】wujie极致的微前端框架项目地址: https://gitcode.com/gh_mirrors/wu/wujie无界Wujie是一款基于 Web Components iframe 的微前端框架核心思路是把子应用原生隔离地装进主应用页面样式靠 Web Components浏览器原生的组件封装技术隔离JS 在 iframe浏览器原生的隔离小窗口里运行两边互不污染。它对子应用几乎零侵入存量老项目也能直接用。如果你有下面两种情况这份实战就是为你写的多团队各维护一套应用想并入同一套系统但技术栈没法统一有一批不想也没法动的老应用需要嵌进新门户里 为什么不用 iframe 直接套纯 iframe 嵌入看似省事实际有三个绕不开的问题隔离太彻底JS、路由、DOM 全关在 iframe 里主应用够不着跨窗口通信很别扭体验割裂弹窗盖不住整页路由跟浏览器地址栏不同步刷新丢状态切换慢每次切页面都重新请求资源白屏时间不受控无界的解法可以一句话讲清Web Components 管 DOMiframe 管 JS。DOM 留在主应用这一层所以弹窗能覆盖整页、样式原生隔离JS 仍跑在 iframe 里执行环境同样天然隔离。两个都是浏览器原生能力比自造沙箱的微前端方案省掉大量边界问题。 三步完成主应用接入Vue / React 主应用可以直接用 wujie-vue、wujie-react 封装组件这里给原生函数写法逻辑完全一样import { setupApp, preloadApp, startApp } from wujie; setupApp({ name: sub-app, // 子应用唯一标识 url: http://sub.example.com, // 子应用地址 el: #container, // 挂载容器 sync: true, // 路由同步刷新不丢路由 alive: true // 保活模式 }); preloadApp({ name: sub-app }); // 预加载资源可加 exec: true 直接预执行 startApp({ name: sub-app }); // 启动并渲染子应用三步各司其职setupApp按name存一份默认参数后面调用不用重复填preloadApp把资源提前拉下来exec: true时连代码都先执行完用户点进来基本秒开startApp才真正渲染。如果主应用彻底不用某子应用了用destroyApp销毁——这是破坏性操作后面坑点里细说。 子应用要改多少代码先解决跨域先给结论跨域配好之后保活和重建模式下一个字都不用改子应用只有单例模式要做生命周期改造下面单独讲。子应用的静态资源和接口请求都是从主应用域名发起的所以子应用服务器必须开放 CORS。用 Node.js 部署的话服务端加一段响应头就够了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, }); next(); });这段中间件会把主应用来源回显给浏览器加载时的资源请求报错就消失了具体放行范围按你的业务收紧。另外遇到代码根本碰不到的子应用还可以用replace钩子在运行时改写它的 HTML / JS / CSS源工程一行不动。 三种运行模式怎么选无界把子应用分成三种运行模式区别在切换页面时子应用被怎么对待模式开启方式改造成本适用场景保活模式alive: true零改造不想白屏、要保留状态老项目首选重建模式不保活、不改造默认零改造低频子应用、内存敏感场景单例模式不保活 生命周期改造需改造多个菜单要跳到同一子应用的不同页面白话翻译保活 ≈ 实例常驻内存切换只显隐不重建重建 每次进来都推倒重来单例 ≈ 常驻一个插槽切换时销毁旧实例、创建新实例而且可以靠改url精准定位到新实例的子路由。一句话选型子应用碰不了代码选保活要省内存且接受重新加载选重建多个菜单指向同一子应用的不同页面选单例这时把name设成同一个各菜单还能共享一个实例和承载 JS 的 iframe。更多细节可看仓库文档 docs/guide/mode.md。✍️ 单例模式生命周期怎么写选了单例模式就要把子应用的创建、挂载、销毁包进两个函数挂在window.__WUJIE_MOUNT销毁挂在window.__WUJIE_UNMOUNT。以 Vue 3 为例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); }window.__POWERED_BY_WUJIE__是无界注入的标记位等于我正被无界接管。特别注意Vite 项目因为脚本是异步加载的实例化时机不确定定义完上面两个函数后要主动调一次window.__WUJIE.mount()无界的 mount 函数内置了去重标记不会重复挂载。⚠️ 高频坑点踩过的都在这预加载与启动参数不一致name、replace、fetch、alive、degrade这五个参数在preloadApp和startApp里必须严格一致最常见的事故就是改了预加载配置忘了同步启动配置渲染直接异常。保活模式下改 url 不跳路由实例是常驻的startApp改变url对路由无效。想让保活子应用换页面得用bus无界自带的事件总线主应用和子应用各持一端通信跳转。别随手 destroyApp它会把 iframe、shadowRoot 和无界实例一起销毁缓存全清。只要子应用后面还会打开下次进来就会有一段白屏重建用refreshApp就够了destroyApp留给真正再也不用的场景。Vite 子应用里 location 不对module 脚本无法被代理劫持window.location.host拿到的是主应用的 host。要读子应用自己的 host统一改用$wujie.location.host无界注入在window.$wujie上。降级有代价degrade: true时子应用跑进真 iframe理论上能兼容老浏览器但弹窗困在 iframe 里盖不住整页。只给确认不兼容的浏览器打开别全局开。 上线前再看三条进阶建议核心子应用预执行preloadApp配合exec: true再加保活请求和渲染全部提前完成接近 SSR 的秒开体验。代价是预加载占用网络线程、预执行占用渲染线程别无脑全开。路由同步 短路径sync: true会把子应用路由写进主应用 URL 的查询参数刷新、分享链接都不丢状态链接太长时用prefix做短路径替换。接口带 cookie子应用请求需要携带 cookie 时传一个自定义 fetch 即可fetch: (url, options) window.fetch(url, { ...options, credentials: include })。你的第一步挑一个最核心的子应用用保活模式 预加载在本地跑通子应用不改代码只把服务端跨域打开链路稳定之后再评估要不要升级到单例模式。【免费下载链接】wujie极致的微前端框架项目地址: https://gitcode.com/gh_mirrors/wu/wujie创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考