uniapp 讓我們輕鬆使用 vue 開發各種小程式。然而，我在實際開發中發現，隨著程式碼數量的不斷增長，有兩個問題越發凸顯：

• 編譯時間不斷拉長
• 編譯產物越來越大

以我本機（i5-6500CPU @ 3.20GHz，記憶體16G，64位作業系統）uniapp專案為例：一次全量生產環境編譯，花費時間3min+，生成小程式包共30M+。而在開發階段還需要不停編譯，既浪費大量時間，又降低開發體驗。

本文記錄了我的優化思路，如果你有更好/新的方案，歡迎在評論區留言。

路由檔案拆分

專案檔案較多，路由集中在一個檔案內，不利於維護和擴充套件。

根據 uniapp 檔案路徑即路由的特性，我們將一組功能、一個活動等具有邊界點的頁面集生成一個路由檔案route.json

圖片上傳cdn

截至2021/11/16日，航班管家小程式打包後的總尺寸有30+M，其中圖片佔了近八成。將圖片上傳到 cdn 後，總包大小下降到不足10M。

打包快取

uniapp 提供了開發環境的編譯快取功能。使用很簡單，在package.json scripts 命令中增加UNI_USING_CACHE=true：

 "dev:wxapp-hbgj": "cross-env NODE_ENV=development UNI_USING_CACHE=true UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch",
 

在我windows機器上，開發環境編譯由原來的3多分鐘，降低到1分半鐘。後面用 mac 測試，時間沒有減少。怪不得官網都沒提及這個優化。

單/多檔案編譯

由於專案無限膨脹，全量編譯花費的時間直線增長，甚至出現了改一行程式碼，等1分鐘的苦痛局面。為了提升開發幸福感、降低開發怒氣值，增加了單/多檔案編譯模式。

注意，非 src 開頭的資料夾名，預設編譯src/projects/xxx，用例:

// 單個資料夾
npm run dev -- --module=jipiao

// 多個資料夾
npm run dev -- --module=jipiao,home,src/pages

頁面下線

背景

每年都會有許多新活動上線，因為各種原因，我們又不能直接刪除過期活動的程式碼/路由，這些內容白白增加了打包時長和總包大小。

解決方案

一個route.json檔案包含一個活動的所有頁面，在此基礎上增加了startTime和endTime兩個可選引數，代表活動的開始時間和結束時間。如果活動失效，則在打包時，將此活動下的每個頁面替換成404內容。例如：

{
  "subPackages": [
    {
      "root": "projects/promotion",
      "startTime": "2020-08-01 00:00:00",
      "endTime": "2020-08-10 00:00:00",
      "pages": [
        {
          "path": "pages/august2020/pages/home",
        },
      ]
    }
  ]
}

子包元件引用

背景

目前航班管家小程式專案已經有20+個子包了，可能出現子包引用其他子包資源的情形。由於微信小程式的分包引用限制，我們要特別關注這種情況。雖然 uniapp 在打包時已經幫我們處理好了靜態資源（js、css、圖片）的引用關係，但對於子包元件引用，它依然無能為力（不警告、不報錯）。

解決方案

uniapp 把每個有效的.vue打包成一個chunk，這個chunk包含很多有用的資訊：檔案路徑、依賴等。我們遍歷每個chunk及其依賴，和所有子包名一一匹配，可以發現當前chunk是否引用了其他子包的元件。最後列印這些錯誤引用關係，由開發者手動更改。