一 、微前端概念
微前端是一種多個(gè)團(tuán)隊(duì)通過(guò)獨(dú)立發(fā)布功能的方式來(lái)共同構(gòu)建現(xiàn)代化 web 應(yīng)用的技術(shù)手段及方法策略
核心價(jià)值:
1.技術(shù)棧無(wú)關(guān) 主框架不限制接入應(yīng)用的技術(shù)棧重归，微應(yīng)用具備完全自主權(quán)
2.獨(dú)立開(kāi)發(fā)国夜、獨(dú)立部署 微應(yīng)用倉(cāng)庫(kù)獨(dú)立减噪，前后端可獨(dú)立開(kāi)發(fā)，部署完成后主框架自動(dòng)完成同步更新
3.增量升級(jí) 在面對(duì)各種復(fù)雜場(chǎng)景時(shí)车吹，我們通常很難對(duì)一個(gè)已經(jīng)存在的系統(tǒng)做全量的技術(shù)棧升級(jí)或重構(gòu)筹裕，而微前端是一種非常好的實(shí)施漸進(jìn)式重構(gòu)的手段和策略
4.獨(dú)立運(yùn)行 每個(gè)微應(yīng)用之間狀態(tài)隔離，運(yùn)行時(shí)狀態(tài)不共享
之前微前端的實(shí)現(xiàn)方案：iframe
體驗(yàn)
iframe 最大的特性就是提供了瀏覽器原生的硬隔離方案窄驹，不論是樣式隔離朝卒、js 隔離這類問(wèn)題統(tǒng)統(tǒng)都能被完美解決。但他的最大問(wèn)題也在于他的隔離性無(wú)法被突破乐埠，導(dǎo)致應(yīng)用間上下文無(wú)法被共享抗斤，隨之帶來(lái)的開(kāi)發(fā)體驗(yàn)、產(chǎn)品體驗(yàn)的問(wèn)題丈咐。
iframe的問(wèn)題
父子應(yīng)用之間通信問(wèn)題
cookie共享問(wèn)題（可做單點(diǎn)登陸SSO）
交互視圖效果不佳
1瑞眼、url 不同步。瀏覽器刷新 iframe url 狀態(tài)丟失扯罐、后退前進(jìn)按鈕無(wú)法使用负拟。
2、UI 不同步歹河，DOM 結(jié)構(gòu)不共享掩浙。想象一下屏幕右下角 1/4 的 iframe 里來(lái)一個(gè)帶遮罩層的彈框，同時(shí)我們要求這個(gè)彈框要瀏覽器居中顯示秸歧，還要瀏覽器 resize 時(shí)自動(dòng)居中..
3厨姚、全局上下文完全隔離，內(nèi)存變量不共享键菱。iframe 內(nèi)外系統(tǒng)的通信谬墙、數(shù)據(jù)同步等需求，主應(yīng)用的 cookie 要透?jìng)鞯礁蛎疾煌淖討?yīng)用中實(shí)現(xiàn)免登效果经备。
4拭抬、慢。每次子應(yīng)用進(jìn)入都是一次瀏覽器上下文重建侵蒙、資源重新加載的過(guò)程造虎。
5、seo差纷闺，獲取不到iframe里面的內(nèi)容導(dǎo)致網(wǎng)站seo排名靠后
二算凿、推薦的幾個(gè)微前端框架
1.Qiankun
qiankun 是一個(gè)基于 single-spa 的微前端實(shí)現(xiàn)庫(kù)，但已使 single?spa 可用于生產(chǎn)（production-ready）犁功。旨在幫助大家能更簡(jiǎn)單氓轰、無(wú)痛的構(gòu)建一個(gè)生產(chǎn)可用微前端架構(gòu)系統(tǒng)
1 優(yōu)點(diǎn)
- 阿里團(tuán)隊(duì)開(kāi)發(fā)維護(hù)，文檔多浸卦。
- 基于 single-spa 封裝署鸡，提供了更加開(kāi)箱即用的 API。
- 解耦限嫌，技術(shù)棧無(wú)關(guān)靴庆，任意技術(shù)棧的應(yīng)用均可 使用/接入，不論是 React/Vue/Angular/JQuery 還是其他等框架萤皂。
- HTML Entry 接入方式撒穷，讓你接入微應(yīng)用像使用 iframe 一樣簡(jiǎn)單。
- 樣式隔離裆熙，確保微應(yīng)用之間樣式互相不干擾端礼。
- JS 沙箱，確保微應(yīng)用之間 全局變量/事件 不沖突入录。
- 資源預(yù)加載蛤奥，在瀏覽器空閑時(shí)間預(yù)加載未打開(kāi)的微應(yīng)用資源，加速微應(yīng)用打開(kāi)速度僚稿。
- umi 插件，提供了 @umijs/plugin-qiankun 供 umi 應(yīng)用一鍵切換成微前端架構(gòu)系統(tǒng)蚀同。
- 兼容IE11
2 缺點(diǎn)
1.上線部署文檔較少
2.qiankun 只能解決子項(xiàng)目之間的樣式相互污染缅刽，不能解決子項(xiàng)目的樣式污染主項(xiàng)目的樣式
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] 主要是用來(lái)解決多個(gè)應(yīng)用之間代碼共享的問(wèn)題,允許 JavaScript 應(yīng)用程序在運(yùn)行時(shí)從另一個(gè)應(yīng) 用程序動(dòng)態(tài)導(dǎo)入代碼。模塊將構(gòu)建唯一的 JavaScript 入口文件衰猛，其他應(yīng)用程 序可以通過(guò)設(shè)置 Webpack 配置項(xiàng)來(lái)下載該入口文件迟蜜。
它還通過(guò)啟用依賴關(guān)系共享來(lái)解決代碼依賴關(guān)系和包大小增加的問(wèn)題娜睛。例如结序， 如果你要下載一個(gè) React 組件配喳，那么你的應(yīng)用程序不會(huì)兩次導(dǎo)入 React 代 碼。模塊將自動(dòng)使用你已有的 React 源，僅額外導(dǎo)入組件代碼轧叽。
你可以使用 React.lazy 和 React.suspense 提供后備功能网严，以確保當(dāng)導(dǎo)入的代碼 由于某種原因失敗后，不會(huì)因構(gòu)建失敗而影響用戶體驗(yàn)灶壶。
多個(gè)單獨(dú)的構(gòu)建最后要形成一個(gè)應(yīng)用程序胸懈。這些單獨(dú)的構(gòu)建不應(yīng)相互依賴涌献，因
此可以單獨(dú)開(kāi)發(fā)和部署。
每個(gè)項(xiàng)目可以是host也可以是remote首有，也可以兩個(gè)都是燕垃。
1.優(yōu)點(diǎn)
1.webpack對(duì)于前端開(kāi)發(fā)者比較熟悉，比較容易接受
2.缺點(diǎn)
1.需要你們所有的項(xiàng)目都基于 Webpack井联，而且已經(jīng)升級(jí)到了 Webpack 5.
2.Webpack 5當(dāng)前并沒(méi)有正式加入Module Federation功能卜壕，而是在開(kāi)發(fā)分支中加入的，所以需要從git倉(cāng)庫(kù)中安裝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.全部打成一個(gè)包轴捎，打包時(shí)間較慢，據(jù)統(tǒng)計(jì)蚕脏，內(nèi)部云編譯平臺(tái)的平均編譯時(shí)間在 100s 以上侦副；
4.公共依賴共享，只能是host給remote提供驼鞭。兩個(gè)remote之間是不能共享的
3.官網(wǎng)文檔
webpack5官網(wǎng)
Webpack5 跨應(yīng)用代碼共享 - Module Federation
3.Piral
Piral 所要求的前提條件相當(dāng)寬松秦驯，開(kāi)發(fā)人員僅需要安裝喜歡的編輯器、終端挣棕、
網(wǎng)絡(luò)瀏覽器和 Node.js 即可译隘。開(kāi)發(fā)者可以在本地開(kāi)發(fā)機(jī)的仿真器中執(zhí)行和調(diào)
試 Piral instance（應(yīng)用程序外殼）和 piltes（功能模塊）。
特點(diǎn)：
1穴张、高度模塊化
2细燎、多框架兼容
3、支持資源文件的拆分
4皂甘、全局狀態(tài)管理
5玻驻、獨(dú)立開(kāi)發(fā)和部署
6、CLI工具
1.優(yōu)點(diǎn)
translations 翻譯 Bundle Splitting 模塊劃分 Multi Framework 多框架 Main Framework 主框架 Modal manager 模態(tài)管理器 live Data Feed 實(shí)時(shí)數(shù)據(jù)推送
standards-Driven 標(biāo)準(zhǔn)驅(qū)動(dòng) free deployments 免費(fèi)部署 free development 免費(fèi)開(kāi)發(fā) form Management 表單管理 search providers 搜索提供程序 global state全局狀態(tài) notifications 通知 module Communication 模塊通信 stitching location運(yùn)行位置
2.缺點(diǎn)
文檔太少，官網(wǎng)只有英文版
3.相關(guān)文檔
官網(wǎng):https://docs.piral.io/guidelines/tutorials/01-introduction
github
