uniapp 讓我們輕松使用 vue 開發各種小程序。然而，我在實際開發中發現，隨着代碼數量的不斷增長，有兩個問題越發凸顯：
- 編譯時間不斷拉長
- 編譯產物越來越大
以我本機（i5-6500CPU @ 3.20GHz，內存16G，64位操作系統）uniapp項目為例：一次全量生產環境編譯，花費時間3min+，生成小程序包共30M+。而在開發階段還需要不停編譯，既浪費大量時間，又降低開發體驗。
本文記錄了我的優化思路，如果你有更好/新的方案，歡迎在評論區留言。
路由文件拆分
項目文件較多，路由集中在一個文件內，不利於維護和擴展。
根據 uniapp 文件路徑即路由的特性，我們將一組功能、一個活動等具有邊界點的頁面集生成一個路由文件route.json，在打包之前，再把這些散落四處的路由文件自動組裝成一個完整的pages.json，供 uniapp 編譯使用。
圖片上傳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是否引用了其他子包的組件。最后打印這些錯誤引用關系，由開發者手動更改。