Hybird-離線資源生成工具

目錄

• 背景

• 離線資源生成工具

• 前端協助

背景

因爲線上樂刻客戶端 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