前端微架構實踐(Vue)

Jmingzi發表於2019-10-10
前端架構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 未實現

流程圖

5d9e935c0237d70074da2b4b

最後完整的專案地址：micro-structure

適用場景

業務複雜的中臺系統不用多說，很有必要。另外，同類性質的簡單頁面也適用，例如營銷活動頁面，可以將庫、請求、通用邏輯抽象到主專案上，子專案只用關注活動本身，減小了專案體積，能非常有效的提升開發速度。

也就是說，並不是在業務上屬於一個模組的才歸屬到子專案中，子專案是路由集合，形態結構上屬於同一類的業務也可以被歸屬到一起。

擴充套件

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

相關文章