Hybird-離線資源生成工具

hedge_hog 發(fā)布于2019-08-20 16:51 / 1046人閱讀

摘要：為了滿足以上需求，就需要制作打包腳本和工具，來滿足正常的運維。離線資源生成工具離線資源的生成，我們提供了一個工具可以打包出增量和全量升級包。比如和需要統(tǒng)一成。


背景

離線資源生成工具

前端協(xié)助

背景

由于線上樂刻客戶端 App 第一次打開平臺 H5 需要幾秒的加載時間，這個體驗對用戶來說并不友好，為了讓用戶跳轉(zhuǎn) H5 和跳轉(zhuǎn)到原生一樣的用戶體驗，就需要把 H5 相關(guān)的離線資源包下發(fā)給客戶端，客戶端就可以使用離線資源來代替實際網(wǎng)絡(luò)請求，節(jié)省用戶等待時間和流量消耗。為了滿足以上需求，就需要制作打包腳本和工具，來滿足正常的運維。

離線資源生成工具

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

offlineh5 安裝方法：

npm install -g offlineh5

使用方式：

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

參數(shù)說明：

-o 資源包輸出路徑
-r 倉庫地址
-u git 用戶名
-p git 用戶密碼
-f 從哪個 commit 導(dǎo)出增量包
-z 打出來的資源包前綴

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

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

前端協(xié)助 遇到的問題

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

node 腳本打出來的離線資源包并不包含圖片。

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

線上現(xiàn)有 cdn一級路徑比較混亂。

線上現(xiàn)有路徑。

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

前端調(diào)整

使用 qtool 腳本獲取 cdn 上的所有圖片，存放到本地作為原始圖片，根據(jù)模塊規(guī)范原始圖片的路徑。比如 le-activity 和 activity 需要統(tǒng)一成 activity。

前端打包不僅輸出 html, js, css，同時每次打包需要把原始圖片拷貝到 dist 目錄下。同時發(fā)布流程需要把 dist 目錄內(nèi)容拷貝到 offlineResource目錄下。

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

調(diào)整后，offlineh5 打包腳本可以根據(jù) 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

參數(shù)說明:

-f, --folder  
    上傳和下載目錄
    
-k, --keypreffix  
    上傳的時候，前綴會插入到 key 的前面。
    下載的時候，前綴會被用于過濾七牛的cdn url。
    
-a, --accessKey 
    access Key 七牛官網(wǎng)獲取
    
-s, --secretKey  
    Secret Key 七牛官網(wǎng)獲取
      
-b, --bucket 
    上傳和下載對象空間
    
-h, --hostUrl 
    七牛 host url，比如：http://cdn.xxx.com