導讀：隨着 Web 前端工程日趨複雜，也帶來了更大的工程理治挑戰，微前端在大型前端工架程構解決方案中成已爲重要思路之一。本文詳細描述 EMP 的誕生背景、使用場景、生態以及如何使用，可以幫助大家能更簡單、更高效的構建生產可用微前端架構。
一、EMP 是什麼
EMP 是一個微前端架構解決方案集合，旨在幫助大家能更簡單、更高效的構建生產可用微前端架構。https://github.com/efoxTeam/emp
2020 年 5 月開始，我們團隊開始探索微前端架構。調研從主流的 iframe、Single SPA 到那時剛剛問世的 module federation，最後選擇性能和比較有前景的 module federation 作爲基礎技術進行架構 EMP 微前端解決方案。至今有一年多，已經 releases 53 個版本，解決 108 個 issues，同時具有一定程度生態，有 43 種使用場景的 Demo，支持 7 種 EMP UI 插件支持（包括但不限於 React、Vue、Angular、Preact），4 個編譯器支持（babel、esbuild、swc、esm），1 個 Webpack Plugin，目前 EMP 已在服務的線上應用具有一定的穩定性和擴展性。
二、EMP 出現的背景
隨着 Web 應用的日漸強大，隨之而來的是前端項目不斷膨脹。業務需求不斷疊加的情況下，巨石項目越來越難維護，編譯時間越來越難等。具體來說是，可能會出現 幾 MB 的 Bundle Size、十幾甚至幾十號前端開發人員、一個前端代碼庫（含 node_modules）會有幾 GB。所以需要思考如何把龐大的 Web 項目分解成若干個項目，以便於團隊分工協作。
業務開發中，不同項目之間會存在很多可複用的模塊。通用的用戶數據、UI 架構風格、相似的業務邏輯都可以複用，例如一個時間戳轉時間的函數就可以到處複用而無需重寫甚至引庫。所以需要思考如何可以讓多個應用項目直接共享這些可複用的模塊。當然拆成 NPM 包是一個不錯的想法，也是最常用的。
三、EMP 的優勢
-
巨型項目解耦。把巨型項目分解成多個小型項目，分團隊開發維護。
-
快速封裝可複用模塊。無需單獨拆包發佈到 NPM，可直接暴露需要共享的模塊。引入端僅需要簡單配置輸出端的地址即可在代碼上使用該共享模塊。
-
動態更新。把複用的業務模塊放在同一個基站應用之中進行管理和維護，並且暴露出去可以給多個應用使用。如果業務模塊需要更新邏輯的話，只需要發佈部署基站應用，其他應用並不需要任何操作，只需要訪問時刷新，即可使用最新業務模塊。
-
遠端模塊，由於引入端無需手動更新，遠端模塊的靈活維護和引入端可以自由組合，甚至可以運行時引入使用遠端模塊。
-
加速構建。因爲引入其他項目暴露的模塊，不需要本地構建這些子模塊的代碼，減小了構建體積，提升整個應用的構建速度。- 減少單個項目 Bundle Size。因爲引入其他項目暴露的模塊，減少各個項目 Bundle Size。
-
下圖時對舊項目改造使用了 EMP 微前端方案後帶來的速度提升的實際數據
四、EMP 架構設計
五、EMP 生態
EMP 針對不同的 UI 框架和使用場景都有進行適配和優化。
六、EMP 開箱即用
1.初始化
npx @efox/emp-cli init-
可以選擇以下模板項目進行初始化，推薦試用 React Typescript 模板
-
按提示執行 cd my-emp && yarn && yarn dev 之後，項目將會自動打開在瀏覽器。
-
React 基站：
-
React 項目：
-
如果你想預先安裝 @efox/emp-cli，可以通過全局安裝 npm install -g @efox/emp-cli 或 yarn global add @efox/emp-cli 。
-
建議你卸載該包使用 npm uninstall -g @efox/emp-cli or yarn global remove @efox/emp-cli 確保 npx 使用的 @efox/emp-cli 是最新版本。
-
EMP 唯一的配置文件 emp-config.js ,
以 React 爲例，解釋配置核心：
/*** @type {import('@efox/emp-cli').EMPConfig}*/module.exports = {webpack() {return {devServer: {/*** 設置 devServer*/port: 8002,},}},async moduleFederation() {return {/*** name: 對外暴露項目名,*/name: 'demo',/*** filename: 對外暴露引用文件名,*/filename: 'emp.js',/*** remotes 遠程模塊* remotes: {* '引用別名': '遠程模塊項目名@遠程模塊的emp.js文件地址',* },*/remotes: {'@emp/demo1': 'demo1@http://localhost:8001/emp.js',},/*** exposes 暴露模塊* exposes: {* '對外暴露的相對路徑': '當前項目相對路徑',* },*/exposes: {'./components/Hello': 'src/components/Hello','./helper': 'src/helper',},/*** shared 共享的第三方依賴* shared: ['依賴名'],*/shared: ['react', 'react-dom'],}},}
const withVue2 = require('@efox/emp-vue2')module.exports = withVue2(({config}) => {const projectName = 'vue2Project'const port = 8008config.output.publicPath(`http://localhost:${port}/`)config.devServer.port(port)config.plugin('mf').tap(args => {args[0] = {...args[0],...{/*** name: 對外暴露項目名,*/name: projectName,/*** filename: 對外暴露引用文件名,*/filename: 'emp.js',/*** remotes 遠程模塊* remotes: {* '引用別名': '遠程模塊項目名@遠程模塊的emp.js文件地址',* },*/remotes: {'@v2b': 'vue2Base@http://localhost:8009/emp.js',},/*** exposes 暴露模塊* exposes: {* '對外暴露的相對路徑': '當前項目相對路徑',* },*/exposes: {'./Content': './src/components/Content',},/*** shared 共享的第三方依賴* shared: ['依賴名'],*/shared: ['vue/dist/vue.esm.js'],},}return args})config.plugin('html').tap(args => {args[0] = {...args[0],...{title: 'EMP Vue2 Project',},}return args})})
七、已有項目無痛升級到 EMP 微前端架構
-
@vue/cli Vue2 模版升級到微前端 EMP
-
React CRA 項目升級到微前端 EMP
八、跨框架調用實現
EMP 不推薦大家跨框架調用，因爲這樣會增加維護成本和風險。但是我們還是支持：
-
Vue3 調用 Vue2 組件
-
Vue&React 互相調用
九、對比 NPM 拆包
但是 npm 拆包有一定工作量：
-
需要把可複用模塊從業務項目抽離到一個新的 package
-
搭建新的構建配置
-
單獨建 repo
-
在原有業務項目重新引用
-
可能會因爲封裝，需要重新設計 API
但是業務模塊抽離成 npm 包後,使用 npm 包的更新流程繁瑣複雜：
-
更新 npm 包版本
-
更新 A 應用的 npm 包版本
-
重啓 A 應用進行驗證
-
發佈部署 A 管理系統應用
-
對 B 和 C 應用循環 2 和 3、4 步驟
但是 npm 包會拖慢構建速度：通過 npm 引入 n 個的業務模塊後，在構建時相當於將 n 個業務模塊的代碼“複製”到了項目中，構建時需要同步去構建這些業務子模塊，導致 bundle size 變大，構建時長會增加，開發體驗變差，發佈效率也會隨之降低。
十、總結
-
本文用較短的篇幅介紹了 EMP 的誕生背景、使用場景、生態以及如何無痛使用。
-
EMP 在不斷迭代升級，同時生態日漸完善，歡迎各位來了解、使用 EMP 微前端解決方案。
-
期待大家一起探討，歡迎來提 issue 或者新功能：https://github.com/efoxTeam/emp
十一、QA
如果有問題的話，可以先來看看我們的 issue 哦。世界這麼大，說不定你和別人遇到一樣的問題：https://github.com/efoxTeam/emp/issues?q=is%3Aissue+is%3Aclosed
文章看完，還不過癮？
更多精彩內容歡迎關注百度開發者中心公衆號
