Hybird-離線資源生成工具

卡洛斯發表於2019-02-16

目錄

  • 背景

  • 離線資源生成工具

  • 前端協助

背景

由於線上樂刻客戶端 App 第一次開啟平臺 H5 需要幾秒的載入時間，這個體驗對使用者來說並不友好，為了讓使用者跳轉 H5 和跳轉到原生一樣的使用者體驗，就需要把 H5 相關的離線資源包下發給客戶端，客戶端就可以使用離線資源來代替實際網路請求，節省使用者等待時間和流量消耗。為了滿足以上需求，就需要製作打包指令碼和工具，來滿足正常的運維。

<!–more–>

離線資源生成工具

離線資源的生成，我們提供了一個工具可以打包出增量和全量升級包。原理是根據 git diff 去比較兩次 commit，然後只關注 offlineResource (與 dist 目錄平級，釋出包需要把 dist 目錄內容拷貝到 offlineResource) 目錄下的兩次提交的檔案差別，從而打出增量包。全量包就是整個 offlineResource 目錄。

offlineh5 安裝方法：

npm install -g offlineh5

使用方式：

offlineh5 -o package -r  http://github.com/xxx.git -f e24b8f0bb9a85c93c6965a906c1ea0448342821a -u gitusername -p gitpassword -z activity

引數說明：

-o 資源包輸出路徑
-r 倉庫地址
-u git 使用者名稱
-p git 使用者密碼
-f 從哪個 commit 匯出增量包
-z 打出來的資源包字首

打出來的離線資源包需要放到七牛 cdn 儲存：

http://oq78hrbgk.bkl.clouddn.com/upgrade/activity/activity.full_0.1.1.zip

前端協助

遇到的問題

之前前端打包只把 html, js, css 匯出到 offlineResource 目錄下，沒有圖片，因為圖片都放在 cdn 上，本地就沒有任何的原始圖片，這樣導致三個問題：

  1. node 指令碼打出來的離線資源包並不包含圖片。

  2. 即使找到了原始圖片，並不能保證原始圖片的本地路徑和cdn上的是一致的。

  3. 線上現有 cdn一級路徑比較混亂。

線上現有路徑。

http://cdn.leoao.com/le-activ…
http://cdn.leoao.com/activity…
http://cdn.leoao.com/activity…

前端調整

  1. 使用 qtool 指令碼獲取 cdn 上的所有圖片，存放到本地作為原始圖片，根據模組規範原始圖片的路徑。比如 le-activity 和 activity 需要統一成 activity。

  2. 前端打包不僅輸出 html, js, css，同時每次打包需要把原始圖片拷貝到 dist 目錄下。同時釋出流程需要把 dist 目錄內容拷貝到 offlineResource目錄下。

  3. 根據 offlineResource 目錄，使用 qtool 指令碼使用該目錄下的所有資源路徑作為 cdn key，然後把所有資源上傳到 cdn 上。以後前端在打包之前開發的時候，完全可以使用本地的路勁作為相對路徑提前配置路徑，而不用考慮 cdn 的上傳路徑問題。

調整後，offlineh5 打包指令碼可以根據 offlineResource 目錄下的不同的 commit，diff 出兩個版本之間差別，從而打出增量包和全量包。

使用 qtool

qtool 安裝方法：

npm install -g qtool

上傳資源:

qtool upload  -f uploadfolder -a RSxpQIxNIS2vo0vuQR3HX701ddS9fdlUnQ5jV8ul -s xCLWczC5V5kyy7H85MNKNYcXT4wx9k5OzT7YDVFk -b mybucket -k activity -h olf3t4olk.bkt.clouddn.com

下載資源:

qtool download  -f downloadfolder -a RSxpQIxNIS2vo0vuQR3HX701ddS9fdlUnQ5jV8ul -s xCLWczC5V5kyy7H85MNKNYcXT4wx9k5OzT7YDVFk -b mybucket -k activity -h olf3t4olk.bkt.clouddn.com

引數說明:

-f, --folder <string> 
    上傳和下載目錄
    
-k, --keypreffix <string> 
    上傳的時候，字首會插入到 key 的前面。
    下載的時候，字首會被用於過濾七牛的cdn url。
    
-a, --accessKey <string>
    access Key 七牛官網獲取
    
-s, --secretKey <string> 
    Secret Key 七牛官網獲取
      
-b, --bucket <string>
    上傳和下載物件空間
    
-h, --hostUrl <string>
    七牛 host url，比如：http://cdn.xxx.com

相關文章