如何快速上手 vite-plugin-qiankun面向新手的完整指南【免费下载链接】vite-plugin-qiankun保留vite es特性快速接入乾坤微前端子应用项目地址: https://gitcode.com/gh_mirrors/vi/vite-plugin-qiankunvite-plugin-qiankun 是一款 Vite 微前端插件让 Vite 构建的子应用快速接入 qiankun 微前端主应用同时保留 Vite 构建 ES 模块的优势。它会自动完成子应用分包预加载公共依赖并为每个子应用提供独立沙箱不需要你手工改造构建产物。适合手里已有 Vite 工程、想把它挂进现有 qiankun 架构的前端同学和团队。 先聊痛点为什么需要它项目小的时候一个大应用装下所有功能没问题。规模上来之后麻烦就来了仓库体积膨胀、构建越来越慢多个团队在同一个工程里并行开发分支互相打架一次发版牵动全站页面。微前端是社区给出的主流解法——把大应用拆成若干子应用同页渲染各自独立开发、独立部署、独立升级qiankun 就是其中使用最广泛的方案之一。但子应用如果用 Vite 来写会撞上一堵墙qiankun 加载子应用入口的方式最初是针对传统打包产物设计的而 Vite 产出的是原生 ES 模块两者对不上手动适配既繁琐又容易踩坑。vite-plugin-qiankun 要解决的就是这个 vite 集成 qiankun 的衔接问题配置一下插件入口加载、生命周期注册、资源路径这些适配工作它全做掉你已有的 Vite 配置基本不受影响。 三步跑起来第一步安装插件一条 npm 命令npm install sh-winter/vite-plugin-qiankun --save-dev以开发依赖安装子应用侧除它之外不需要引入额外运行时依赖。第二步1 分钟注册 vite.configimport { defineConfig } from vite; import qiankun from sh-winter/vite-plugin-qiankun; import { name as packageName } from ./package.json; export default defineConfig({ base: /${packageName}/, plugins: [qiankun(packageName)], });两个关键点qiankun(packageName)传的是子应用名必须与 qiankun 主应用注册时使用的名字一致base指定部署路径生产环境不配它子应用资源会加载不到。第三步生命周期导出——三个函数分别在何时执行export async function bootstrap() { console.log(app bootstraped); } export async function mount(props) { console.log(props from main framework, props); ReactDOM.render(App /, document.getElementById(react15Root)); } export async function unmount(props) { const { container } props; ReactDOM.unmountComponentAtNode( container ? container.querySelector(#react15Root) : document.getElementById(react15Root) ); }三者的执行时机是固定的bootstrap 在子应用首次加载时执行一次mount 在每次进入页面时执行主应用下发的数据通过 props 传入unmount 在离开页面时做清理组件必须真正卸载否则 DOM 会残留。⚙️ 核心功能拆解自动分包打包后每个子应用一个独立 chunk你能得到什么构建之后子应用代码被自动拆成独立的 chunk不会和主应用或其他子应用搅在一起全程不用手写任何拆分规则。它怎么做到插件在构建阶段改写入口 HTML——把原本的模块脚本换成动态引入并自动注入生命周期注册代码让 qiankun 能把整个子应用作为一坨资源完整接管。打个比方这相当于每个子应用都是一个封好的快递箱主应用这个快递员整箱取走就行不用关心箱子里每件衣服该归谁。公共依赖预加载公共代码只拉一次你能得到什么像 React、Vue 这类多子应用都会用到的公共库被抽成一个公共 chunk主应用侧提前预加载一次之后每个子应用加载时直接复用总流量变少首屏变快。它怎么做到公共依赖被单独抽出成 chunk在子应用真正渲染前先行加载子应用运行时引用的是这份已经就绪的公共代码。就像厨房里的共享备菜台常用食材提前洗好切好各子应用做菜时直接拿谁也不用单独跑一趟菜市场。沙箱隔离同一页面多子应用互不干扰你能得到什么多个子应用同页渲染时各自运行在独立沙箱里全局变量和内部状态互不串扰一个子应用出问题不会连累别人稳定性有底。它怎么做到插件为每个子应用生成独立的沙箱环境子应用代码读写全局变量时落在沙箱上而不是真实 window 上影响范围天然被圈住。好比给每个子应用一间密封隔间——里面随便折腾隔壁的人完全不受打扰。实战示例Vue3 与 React 两类栈Vue3 Vite 子应用用 Vite 的 Vue3 模板创建子应用按上面的方式配好插件名和 base导出三个生命周期函数后在主应用侧按名字注册即可上线。Vue3 子应用支持独立开发、独立部署、独立发版同一主工程下挂多个 Vue3 子应用也互不影响。React Vite 子应用React 侧做法一致入口就是你熟悉的 ReactDOM 渲染逻辑mount 时把组件渲染到主应用传入的容器unmount 时对同一节点卸载、释放内存。仓库的example/目录里备好了主应用和 Vue3、React 等子应用示例装好依赖启动即可跑通完整链路方便对照调参。最佳实践与避坑独立开发、独立部署每个子应用独立仓库、独立 CI、独立发版主应用只按名字注册互不改代码公共依赖管理Vue、React 等公共库统一版本并汇入公共 chunk避免同一依赖加载多个版本沙箱隔离意识确需写全局变量时显式操作沙箱qiankunWindow不要直接污染真实 window否则会漏到其他子应用子应用名就是契约插件传的名字与主应用注册名必须一致生产环境 base 必填坑一开发环境下子应用加载模式与热更新插件冲突子应用调试模式时先关掉 HMR插件提供 useDevMode 开关独立调试时再打开坑二unmount 逻辑别漏不真正卸载组件的话DOM 残留会导致重复渲染和内存泄漏生态图谱Qiankun基于 Single-SPA 的微前端框架负责主应用侧对子应用的注册、调度与隔离Vite基于 ES 模块的构建工具给子应用提供秒级开发体验和高效率构建Vue3带响应式系统与组件模型的 UI 框架是众多团队编写子应用的首选React提供虚拟 DOM 与组件化开发的 UI 库同样适合用来写子应用vite-plugin-qiankun 就是 Vite 世界和 qiankun 生态之间的桥Vite 管快插件管入口与生命周期适配qiankun 管统一调度Vue3 和 React 写的子应用得以在同页并排落地、各司其职。一句话总结把 Vite 子应用接入 qiankun 主应用的成本就是安装、注册、导出生命周期这三步其余交给插件自动完成。建议的下一步先在现有工程里挑最小的一块拆成子应用按三步走流程跑通再对照example/目录的示例逐一校准 qiankun 子应用配置想深入原理时可以直接读src/下的核心实现。【免费下载链接】vite-plugin-qiankun保留vite es特性快速接入乾坤微前端子应用项目地址: https://gitcode.com/gh_mirrors/vi/vite-plugin-qiankun创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考