前端微架構實踐(Vue)

本文同步發表在我的博客：前端微架構實踐

前言

爲了拆分與適當解耦聚合業務各模塊，咱們須要採用一種友好的開發模式去解決這些問題，咱們的願景是：

• ☕️ 主子項目獨立開發、部署
• 🔥 主子項目開發時保持熱更新
• 🚗 主項目提供路由容器，子項目只是掛載到容器中的視圖
• 👊 主子項目共用一個 Vue、Router、Store 實例，這樣能保證能共享全局組件或 Vue 插件
• 📦 子項目在開發時會動態注入主項目容器、打包後不會包含任何主項目代碼
• 💻 不涉及 Node 服務，配置文件存儲在 CDN 中

Tips: 爲了不主項目打包體積過大，能夠將庫代碼抽取爲 CDN 引入（默認），這樣子項目動態注入時下載更快。

⚠️ 關於按需加載，在開發環境下，因爲webpack devServer 加載資源時是不會跨項目加載的，因此是沒法作到的，固然能夠改造 webpack 的加載邏輯，把待加載的資源 origin 設置爲 項目菜單配置中的 origin。打包後若是主子項目的靜態資源部署在同一個目錄下，是能夠支持按需加載的。

開發流程

1.安裝 micro-structure-cli 插件

npm install -g micro-structure-cli
複製代碼

2.建立配置文件，並能夠經過 http 訪問到該文件

Tips： 在開發時，你能夠在主項目的 /public/ 目錄下建立

配置文件結構示例：

/* * 目前這個配置文件的格式有待完善 * 配置文件對應着加載器邏輯 */
window._MICRO_APP_CONFIG = {
  // 開發環境的配置
  devMenu: [
    {
      // 資源的惟一標識，用來避免重複加載
      id: 'index',
      name: '首頁',
      path: '/',
      // 該項目入口文件的 path，也就是去掉下面 origin 後的地址
      urlPath: '/app.js',
      // 將 origin 抽取出來的目的是用來判斷
      // 當前路由對應的項目資源 是否爲 當前 devServer ，避免重複加載
      origin: 'http://localhost:8080'
    }
  ],
  // 非開發環境
  normalMenu: []
}
複製代碼

3.建立主項目

# 初始化選擇主項目
micro init

# 提示輸入菜單配置文件 url 地址

# 安裝依賴
npm install 

啓動服務
npm run serve
複製代碼

4.建立子項目

# 初始化選擇子項目
micro init

# 安裝依賴
npm install 

# 安裝主項目資源注入插件
vue add micro

# 啓動服務
npm run serve

# 在配置文件中，增長子項目的菜單信息

# 主項目有更新時，運行命令會自動刷新
npm run micro
複製代碼

加載器

加載器存在於主項目中，用來加載當前 path 對應的子項目，同時給路由添加守衛，在離開前加載對應路由的子項目。

由上面的配置文件暴露的 window 對象 _MICRO_APP_CONFIG 加載器的邏輯也在該對象下

window. _MICRO_APP_CONFIG = {
  // 已區分環境的菜單列表
  menu: [],
  // 加載方法
  load: function (menuItem) {
  },
  // 初始化時爲路由添加的守衛
  addWatch: function () {}
}
複製代碼

若是是正常的路由跳轉，加載器會自動處理。若是須要預加載，能夠手動觸發 load 方法。

Tips： 加載時的 loading 未實現

流程圖

最後完整的項目地址：micro-structure

適用場景

業務複雜的中臺系統不用多說，頗有必要。另外，同類性質的簡單頁面也適用，例如營銷活動頁面，能夠將庫、請求、通用邏輯抽象到主項目上，子項目只用關注活動自己，減少了項目體積，能很是有效的提高開發速度。

也就是說，並非在業務上屬於一個模塊的才歸屬到子項目中，子項目是路由集合，形態結構上屬於同一類的業務也能夠被歸屬到一塊兒。

擴展

很顯然，這是基於 Vue 及 Vue 原型來實現的一套方案，若是換作是 React 呢？或者主子項目跨技術棧呢？我想這些都會比較容易去思考實現。由於這是接下來要作的事情。