微前端系列（四）

說到微前端執行方式，免不了談談優劣分析。以下針對服務應用端的三種解決方案來討論。

• xhr/fetch

• module-federation

• use micro frontend framework

xhr/fetch javascript file to insert in script tag

說穿了就是直接插入 script tag 把 JavaScript 運行起來，注入 global 之中。或是引用單例註冊對象針對行為、元件、模組、資源來供給註冊。

這種方法可簡單可複雜，好壞上下限非常巨大。

• module-federation

使用 webpack 或 vite 提供的 module-federation-plugin 來註冊，它屬於前一種方法的延伸，但提供了完整的解決方案和易懂的操作模式。

但因為吃到了打包體系，webpack 和 vite 並沒有完全通用，進而導致運作會發生異常。採用時必須讓打包工具一致化。

• use micro frontend framework (single-spa, qiankun)

這是最省力的解決方案，事實上這也是基於前面兩種所做的更高階的方法，把維護問題交給套件方。

但同時你失去了微調能力，很多時候在微前端實作在乎的並不是單純實作出微前端，而是各種細膩的優化與調控。