一 、微前端概念
微前端是一種多個團隊通過獨立發(fā)布功能的方式來共同構(gòu)建現(xiàn)代化 web 應用的技術(shù)手段及方法策略
核心價值:
1.技術(shù)棧無關(guān) 主框架不限制接入應用的技術(shù)棧，微應用具備完全自主權(quán)
2.獨立開發(fā)、獨立部署 微應用倉庫獨立，前后端可獨立開發(fā)，部署完成后主框架自動完成同步更新
3.增量升級 在面對各種復雜場景時，我們通常很難對一個已經(jīng)存在的系統(tǒng)做全量的技術(shù)棧升級或重構(gòu)，而微前端是一種非常好的實施漸進式重構(gòu)的手段和策略
4.獨立運行 每個微應用之間狀態(tài)隔離，運行時狀態(tài)不共享
之前微前端的實現(xiàn)方案：iframe
體驗
iframe 最大的特性就是提供了瀏覽器原生的硬隔離方案，不論是樣式隔離、js 隔離這類問題統(tǒng)統(tǒng)都能被完美解決。但他的最大問題也在于他的隔離性無法被突破，導致應用間上下文無法被共享，隨之帶來的開發(fā)體驗、產(chǎn)品體驗的問題。
iframe的問題
父子應用之間通信問題
cookie共享問題（可做單點登陸SSO）
交互視圖效果不佳
1、url 不同步。瀏覽器刷新 iframe url 狀態(tài)丟失、后退前進按鈕無法使用。
2、UI 不同步，DOM 結(jié)構(gòu)不共享。想象一下屏幕右下角 1/4 的 iframe 里來一個帶遮罩層的彈框，同時我們要求這個彈框要瀏覽器居中顯示，還要瀏覽器 resize 時自動居中..
3、全局上下文完全隔離，內(nèi)存變量不共享。iframe 內(nèi)外系統(tǒng)的通信、數(shù)據(jù)同步等需求，主應用的 cookie 要透傳到根域名都不同的子應用中實現(xiàn)免登效果。
4、慢。每次子應用進入都是一次瀏覽器上下文重建、資源重新加載的過程。
5、seo差，獲取不到iframe里面的內(nèi)容導致網(wǎng)站seo排名靠后
二、推薦的幾個微前端框架
1.Qiankun
qiankun 是一個基于 single-spa 的微前端實現(xiàn)庫，但已使 single?spa 可用于生產(chǎn)（production-ready）。旨在幫助大家能更簡單、無痛的構(gòu)建一個生產(chǎn)可用微前端架構(gòu)系統(tǒng)
1 優(yōu)點
- 阿里團隊開發(fā)維護，文檔多。
- 基于 single-spa 封裝，提供了更加開箱即用的 API。
- 解耦，技術(shù)棧無關(guān)，任意技術(shù)棧的應用均可 使用/接入，不論是 React/Vue/Angular/JQuery 還是其他等框架。
- HTML Entry 接入方式，讓你接入微應用像使用 iframe 一樣簡單。
- 樣式隔離，確保微應用之間樣式互相不干擾。
- JS 沙箱，確保微應用之間 全局變量/事件 不沖突。
- 資源預加載，在瀏覽器空閑時間預加載未打開的微應用資源，加速微應用打開速度。
- umi 插件，提供了 @umijs/plugin-qiankun 供 umi 應用一鍵切換成微前端架構(gòu)系統(tǒng)。
- 兼容IE11
2 缺點
1.上線部署文檔較少
2.qiankun 只能解決子項目之間的樣式相互污染，不能解決子項目的樣式污染主項目的樣式
3.相關(guān)文檔
官網(wǎng):https://qiankun.umijs.org/zh/cookbook
github地址
qiankun 技術(shù)圓桌
微前端框架qiankun以及源碼
2. Webpack 5 的 Module Federation
Module Federation [?fed??re??n] 主要是用來解決多個應用之間代碼共享的問題,允許 JavaScript 應用程序在運行時從另一個應 用程序動態(tài)導入代碼。模塊將構(gòu)建唯一的 JavaScript 入口文件，其他應用程 序可以通過設(shè)置 Webpack 配置項來下載該入口文件。
它還通過啟用依賴關(guān)系共享來解決代碼依賴關(guān)系和包大小增加的問題。例如， 如果你要下載一個 React 組件，那么你的應用程序不會兩次導入 React 代 碼。模塊將自動使用你已有的 React 源，僅額外導入組件代碼。
你可以使用 React.lazy 和 React.suspense 提供后備功能，以確保當導入的代碼 由于某種原因失敗后，不會因構(gòu)建失敗而影響用戶體驗。
多個單獨的構(gòu)建最后要形成一個應用程序。這些單獨的構(gòu)建不應相互依賴，因
此可以單獨開發(fā)和部署。
每個項目可以是host也可以是remote，也可以兩個都是。
1.優(yōu)點
1.webpack對于前端開發(fā)者比較熟悉，比較容易接受
2.缺點
1.需要你們所有的項目都基于 Webpack，而且已經(jīng)升級到了 Webpack 5.
2.Webpack 5當前并沒有正式加入Module Federation功能，而是在開發(fā)分支中加入的，所以需要從git倉庫中安裝Webpack 5 以及html-webpack-plugin，即
npm install --save-dev git://github.com/webpack/webpack.git#dev-1
npm git://github.com/ScriptedAlchemy/html-webpack-plugin.git#master
3.全部打成一個包，打包時間較慢，據(jù)統(tǒng)計，內(nèi)部云編譯平臺的平均編譯時間在 100s 以上；
4.公共依賴共享，只能是host給remote提供。兩個remote之間是不能共享的
3.官網(wǎng)文檔
webpack5官網(wǎng)
Webpack5 跨應用代碼共享 - Module Federation
3.Piral
Piral 所要求的前提條件相當寬松，開發(fā)人員僅需要安裝喜歡的編輯器、終端、
網(wǎng)絡(luò)瀏覽器和 Node.js 即可。開發(fā)者可以在本地開發(fā)機的仿真器中執(zhí)行和調(diào)
試 Piral instance（應用程序外殼）和 piltes（功能模塊）。
特點：
1、高度模塊化
2、多框架兼容
3、支持資源文件的拆分
4、全局狀態(tài)管理
5、獨立開發(fā)和部署
6、CLI工具
1.優(yōu)點
translations 翻譯 Bundle Splitting 模塊劃分 Multi Framework 多框架 Main Framework 主框架 Modal manager 模態(tài)管理器 live Data Feed 實時數(shù)據(jù)推送
standards-Driven 標準驅(qū)動 free deployments 免費部署 free development 免費開發(fā) form Management 表單管理 search providers 搜索提供程序 global state全局狀態(tài) notifications 通知 module Communication 模塊通信 stitching location運行位置
2.缺點
文檔太少，官網(wǎng)只有英文版
3.相關(guān)文檔
官網(wǎng):https://docs.piral.io/guidelines/tutorials/01-introduction
github
