1. 什么是微前端？它的核心價值是什么？
答案：
微前端是一種將前端應用拆分為獨立模塊的架構模式，每個模塊可由不同團隊獨立開發、測試、部署和運行。其核心價值包括：
- 技術棧無關性：支持 React、Vue、Angular 等不同框架共存。
- 獨立部署：子應用可獨立更新，降低整體風險。
- 團隊自治：跨團隊協作時減少耦合，提升開發效率。
- 漸進式升級：老系統可逐步替換，避免重寫。
2. 微前端常見實現方案有哪些？對比它們的優缺點。
答案：
- 方案對比：
- iframe：天然隔離，但通信復雜、性能差、SEO 不友好。
- Web Components：瀏覽器原生支持，但生態較弱，兼容性要求高。
- Module Federation（Webpack 5）：動態加載遠程模塊，高效但依賴構建工具。
- Single-SPA：路由驅動的微前端框架，靈活但需統一生命周期管理。
- qiankun：基于 Single-SPA，提供沙箱和樣式隔離，開箱即用，適合復雜場景。
3. 如何實現微前端的樣式隔離？
答案：
- CSS Scoped：通過
scoped屬性或 CSS Modules 限定組件樣式。 - Shadow DOM：利用瀏覽器原生隔離，但可能影響全局樣式穿透。
- 動態前綴：構建時自動添加命名空間（如
qiankun的樣式重寫）。 - CSS-in-JS：通過運行時生成唯一類名（如 styled-components）。
- 沙箱隔離：運行時動態修改樣式表作用域（常見于 JS 沙箱方案）。
4. 微前端中的 JS 沙箱如何實現？有哪些技術方案？
答案：
JS 沙箱用于隔離子應用的全局變量污染，常見方案：
- 快照沙箱：在子應用加載前保存全局狀態，卸載時恢復（適合單實例場景）。
- Proxy 沙箱：通過 ES6 Proxy 代理
window對象，實現多實例隔離（如qiankun的ProxySandbox）。 - iframe 沙箱：利用 iframe 的天然隔離性，但通信成本高。
5. 微前端子應用間如何通信？
答案：
- Custom Events：通過瀏覽器原生
CustomEvent發布訂閱事件。 - 狀態管理庫：共享 Redux 或 Vuex Store（需主應用協調）。
- URL 參數：通過路由傳參或 Query String 同步狀態。
- 全局變量：主應用掛載共享對象（需謹慎使用，可能引發沖突）。
- Event Bus：基于 Mitt 或自定義事件中心實現跨應用通信。
6. 如何優化微前端的性能？
答案：
- 按需加載：子應用路由懶加載，減少首屏資源體積。
- 預加載策略：空閑時預加載潛在子應用資源。
- 共享依賴：通過 Module Federation 復用公共庫（如 React、Lodash）。
- 緩存策略：對子應用的靜態資源設置長期緩存（Hash 命名）。
- 代碼拆分：子應用內部按功能拆分 Chunk，避免單一文件過大。
7. 微前端部署時需要注意哪些問題？
答案：
- 獨立部署：確保子應用可獨立發布，不影響主應用和其他子應用。
- 版本兼容性：主應用與子應用的 API 或通信協議需向后兼容。
- CDN 加速：子應用資源托管到 CDN，提升加載速度。
- 灰度發布：通過 Feature Flag 或路由配置逐步放量子應用新版本。
- 回滾機制：子應用異常時快速切換至舊版本。
8. Server Components 對微前端架構有何影響？
答案：
Server Components 將部分邏輯移至服務端渲染，可能改變微前端的實現模式：
- 混合渲染：主應用為 CSR，子應用為 SSR 或 Server Components。
- 數據獲取優化：減少客戶端與子應用的數據請求鏈。
- 動態組合：服務端按需組合微前端模塊，提升首屏性能。
- 挑戰：需解決服務端與客戶端的生命周期協同問題。
9. 如何實現微前端的自動化測試？
答案：
- 單元測試：子應用獨立測試（Jest、Vitest）。
- 集成測試：主應用與子應用聯合測試（Cypress、Playwright）。
- Mock 沙箱環境：模擬主應用環境驗證子應用掛載。
- 契約測試：確保主應用與子應用的接口協議一致（Pact）。
- 可視化測試：通過 Storybook 維護子應用 UI 一致性。
10. 微前端與微服務的協同設計需要注意什么？
答案：
- 垂直拆分：前后端微模塊對齊，避免一個前端對應多個后端服務。
- API 網關：統一后端接口聚合，減少前端跨服務調用。
- 鑒權同步：共享 Token 或 Cookie，確保身份驗證一致性。
- 錯誤隔離：后端服務故障不應導致前端整體崩潰。
- 監控一體化：前后端日志、鏈路追蹤（如 OpenTelemetry）整合。
11. 如何處理微前端中的第三方依賴沖突？
答案：
- 依賴提升：主應用統一提供公共庫（如 React、Vue），子應用通過
externals排除。 - Module Federation：共享依賴并指定版本范圍（Webpack 5）。
- UMD 加載：通過全局變量注入依賴（如
window.React）。 - 動態加載：子應用按需加載不同版本依賴（可能增加包體積）。
12. 微前端如何實現權限控制和路由管理？
答案：
- 集中式路由：主應用控制全局路由，按權限動態注冊子應用路由。
- 子應用自治：子應用內部路由自行管理，但需同步主應用的路由狀態。
- 權限下發：主應用獲取用戶權限后，通過 Props 或 Event 傳遞至子應用。
- 路由守衛：主應用攔截導航，驗證權限后再加載子應用。
 工具)
)
