前端架構大亂鬥:讓 React 和 Vue 在同一個專案中和平共處的黑科技
公司舊系統是 Vue 2,新功能想用 React,遷移又不能一刀切——這個局面在中大型前端團隊裡比想像中常見。Module Federation 最初是 Webpack 5 的功能,後來 @originjs/vite-plugin-federation 把這套機制帶進 Vite 生態,讓跨框架整合在開發體驗上變得可接受。 這篇文章拆解它的原理、給出可實際跑起來的設定,並點出幾個抄網路範例會踩到的坑。 微前端在解決什麼問題一個大型電商平台,商品展示、購物車、會員中心分屬不同團隊。傳統做法是把所有功能打包成單一應用程式,結果: 購物車改一行,整站要重新部署 商品團隊想升 Vue 3,但購物車還繫在 Vue 2 的 API 上 測試牽一髮動全身,沒人敢在上線前改超過三個檔案 微前端把這個大應用拆成多個獨立部署的模組,每個模組有自己的建置流程、自己的技術棧,只在瀏覽器端組合成完整的畫面。 Module Federation 的核心機制Module Federation 讓不同應用程式在執行時動態分享程式碼,不是在建置時打包在一起。 架構裡有兩個角色: Host(主應用程式):載入並整...




