摘要:為了滿(mǎn)足以上需求,就需要制作打包腳本和工具,來(lái)滿(mǎn)足正常的運(yùn)維。離線(xiàn)資源生成工具離線(xiàn)資源的生成,我們提供了一個(gè)工具可以打包出增量和全量升級(jí)包。比如和需要統(tǒng)一成。
目錄
背景背景
離線(xiàn)資源生成工具
前端協(xié)助
由于線(xiàn)上樂(lè)刻客戶(hù)端 App 第一次打開(kāi)平臺(tái) H5 需要幾秒的加載時(shí)間,這個(gè)體驗(yàn)對(duì)用戶(hù)來(lái)說(shuō)并不友好,為了讓用戶(hù)跳轉(zhuǎn) H5 和跳轉(zhuǎn)到原生一樣的用戶(hù)體驗(yàn),就需要把 H5 相關(guān)的離線(xiàn)資源包下發(fā)給客戶(hù)端,客戶(hù)端就可以使用離線(xiàn)資源來(lái)代替實(shí)際網(wǎng)絡(luò)請(qǐng)求,節(jié)省用戶(hù)等待時(shí)間和流量消耗。為了滿(mǎn)足以上需求,就需要制作打包腳本和工具,來(lái)滿(mǎn)足正常的運(yùn)維。
離線(xiàn)資源生成工具離線(xiàn)資源的生成,我們提供了一個(gè)工具可以打包出增量和全量升級(jí)包。原理是根據(jù) git diff 去比較兩次 commit,然后只關(guān)注 offlineResource (與 dist 目錄平級(jí),發(fā)布包需要把 dist 目錄內(nèi)容拷貝到 offlineResource) 目錄下的兩次提交的文件差別,從而打出增量包。全量包就是整個(gè) offlineResource 目錄。
offlineh5 安裝方法:
npm install -g offlineh5
使用方式:
offlineh5 -o package -r http://github.com/xxx.git -f e24b8f0bb9a85c93c6965a906c1ea0448342821a -u gitusername -p gitpassword -z activity
參數(shù)說(shuō)明:
-o 資源包輸出路徑
-r 倉(cāng)庫(kù)地址
-u git 用戶(hù)名
-p git 用戶(hù)密碼
-f 從哪個(gè) commit 導(dǎo)出增量包
-z 打出來(lái)的資源包前綴
打出來(lái)的離線(xiàn)資源包需要放到七牛 cdn 存儲(chǔ):
http://oq78hrbgk.bkl.clouddn.com/upgrade/activity/activity.full_0.1.1.zip前端協(xié)助 遇到的問(wèn)題
之前前端打包只把 html, js, css 導(dǎo)出到 offlineResource 目錄下,沒(méi)有圖片,因?yàn)閳D片都放在 cdn 上,本地就沒(méi)有任何的原始圖片,這樣導(dǎo)致三個(gè)問(wèn)題:
node 腳本打出來(lái)的離線(xiàn)資源包并不包含圖片。
即使找到了原始圖片,并不能保證原始圖片的本地路徑和cdn上的是一致的。
線(xiàn)上現(xiàn)有 cdn一級(jí)路徑比較混亂。
線(xiàn)上現(xiàn)有路徑。
前端調(diào)整http://cdn.leoao.com/le-activ...
http://cdn.leoao.com/activity...
http://cdn.leoao.com/activity...
使用 qtool 腳本獲取 cdn 上的所有圖片,存放到本地作為原始圖片,根據(jù)模塊規(guī)范原始圖片的路徑。比如 le-activity 和 activity 需要統(tǒng)一成 activity。
前端打包不僅輸出 html, js, css,同時(shí)每次打包需要把原始圖片拷貝到 dist 目錄下。同時(shí)發(fā)布流程需要把 dist 目錄內(nèi)容拷貝到 offlineResource目錄下。
根據(jù) offlineResource 目錄,使用 qtool 腳本使用該目錄下的所有資源路徑作為 cdn key,然后把所有資源上傳到 cdn 上。以后前端在打包之前開(kāi)發(fā)的時(shí)候,完全可以使用本地的路勁作為相對(duì)路徑提前配置路徑,而不用考慮 cdn 的上傳路徑問(wèn)題。
調(diào)整后,offlineh5 打包腳本可以根據(jù) offlineResource 目錄下的不同的 commit,diff 出兩個(gè)版本之間差別,從而打出增量包和全量包。
使用 qtoolqtool 安裝方法:
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ù)說(shuō)明:
-f, --folder上傳和下載目錄 -k, --keypreffix 上傳的時(shí)候,前綴會(huì)插入到 key 的前面。 下載的時(shí)候,前綴會(huì)被用于過(guò)濾七牛的cdn url。 -a, --accessKey access Key 七牛官網(wǎng)獲取 -s, --secretKey Secret Key 七牛官網(wǎng)獲取 -b, --bucket 上傳和下載對(duì)象空間 -h, --hostUrl 七牛 host url,比如:http://cdn.xxx.com
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://m.hztianpu.com/yun/23027.html
摘要:為了滿(mǎn)足以上需求,就需要制作打包腳本和工具,來(lái)滿(mǎn)足正常的運(yùn)維。離線(xiàn)資源生成工具離線(xiàn)資源的生成,我們提供了一個(gè)工具可以打包出增量和全量升級(jí)包。比如和需要統(tǒng)一成。 目錄 背景 離線(xiàn)資源生成工具 前端協(xié)助 背景 由于線(xiàn)上樂(lè)刻客戶(hù)端 App 第一次打開(kāi)平臺(tái) H5 需要幾秒的加載時(shí)間,這個(gè)體驗(yàn)對(duì)用戶(hù)來(lái)說(shuō)并不友好,為了讓用戶(hù)跳轉(zhuǎn) H5 和跳轉(zhuǎn)到原生一樣的用戶(hù)體驗(yàn),就需要把 H5 相關(guān)的離線(xiàn)資源...
摘要:為了滿(mǎn)足以上需求,就需要制作打包腳本和工具,來(lái)滿(mǎn)足正常的運(yùn)維。離線(xiàn)資源生成工具離線(xiàn)資源的生成,我們提供了一個(gè)工具可以打包出增量和全量升級(jí)包。比如和需要統(tǒng)一成。 目錄 背景 離線(xiàn)資源生成工具 前端協(xié)助 背景 由于線(xiàn)上樂(lè)刻客戶(hù)端 App 第一次打開(kāi)平臺(tái) H5 需要幾秒的加載時(shí)間,這個(gè)體驗(yàn)對(duì)用戶(hù)來(lái)說(shuō)并不友好,為了讓用戶(hù)跳轉(zhuǎn) H5 和跳轉(zhuǎn)到原生一樣的用戶(hù)體驗(yàn),就需要把 H5 相關(guān)的離線(xiàn)資源...
摘要:表示備份過(guò)程正常,否則備份過(guò)程有錯(cuò)誤。此時(shí)請(qǐng)求不走緩存系統(tǒng)。升級(jí)流程圖離線(xiàn)資源緩存使用緩存時(shí)機(jī)只針對(duì)的以為主域名的請(qǐng)求進(jìn)行攔截,然后根據(jù)請(qǐng)求鏈接,找到具體文件緩存。 目錄 背景 接口格式 離線(xiàn)資源包格式 離線(xiàn)資源下發(fā) 離線(xiàn)資源緩存 背景 由于線(xiàn)上樂(lè)刻客戶(hù)端 App 第一次打開(kāi)平臺(tái) H5 需要幾秒的加載時(shí)間,這個(gè)體驗(yàn)對(duì)用戶(hù)來(lái)說(shuō)并不友好,為了讓用戶(hù)跳轉(zhuǎn) H5 和跳轉(zhuǎn)到原生一樣的用戶(hù)體驗(yàn)...
摘要:表示備份過(guò)程正常,否則備份過(guò)程有錯(cuò)誤。此時(shí)請(qǐng)求不走緩存系統(tǒng)。升級(jí)流程圖離線(xiàn)資源緩存使用緩存時(shí)機(jī)只針對(duì)的以為主域名的請(qǐng)求進(jìn)行攔截,然后根據(jù)請(qǐng)求鏈接,找到具體文件緩存。 目錄 背景 接口格式 離線(xiàn)資源包格式 離線(xiàn)資源下發(fā) 離線(xiàn)資源緩存 背景 由于線(xiàn)上樂(lè)刻客戶(hù)端 App 第一次打開(kāi)平臺(tái) H5 需要幾秒的加載時(shí)間,這個(gè)體驗(yàn)對(duì)用戶(hù)來(lái)說(shuō)并不友好,為了讓用戶(hù)跳轉(zhuǎn) H5 和跳轉(zhuǎn)到原生一樣的用戶(hù)體驗(yàn)...
閱讀 2863·2021-09-24 10:34
閱讀 1945·2021-09-22 10:02
閱讀 2340·2021-09-09 09:33
閱讀 1520·2021-08-13 15:02
閱讀 3354·2020-12-03 17:10
閱讀 1253·2019-08-30 15:44
閱讀 2205·2019-08-30 12:58
閱讀 3295·2019-08-26 13:40