前端資源加載重試

Prasanta 發(fā)布于2019-08-23 15:28 / 2379人閱讀

摘要：資源加載重試，則是提高用戶體驗中重要的一環(huán)。對加載失敗的進行重試。一個，有時候會包括及資源，其中一個加載失敗便會發(fā)起重試，直到有一個資源重試了次就判斷為失敗。通過資源加載重試，可大大減少中加載異步的頁面文件時，失敗而導(dǎo)致白屏的問題。

介紹

對于TO C的應(yīng)用，用戶網(wǎng)絡(luò)千差萬別，總有各種網(wǎng)絡(luò)問題導(dǎo)致資源加載失敗，使得訪問時出現(xiàn)白屏，樣式錯亂等。資源加載重試，則是提高用戶體驗中重要的一環(huán)。

最近開始嘗試用 Vue 整套技術(shù)體系進行開發(fā)。如何在 Vue 中做資源加載重試？

資源分類

目前常見的前端資源分為

script 腳本

css 樣式文件

img 圖片

background-img 背景圖

而在 webpack 構(gòu)建體系里，根據(jù)加載方式可以細(xì)分為

內(nèi)聯(lián)到html的script,link標(biāo)簽

img圖片

import() 或 require.ensure 異步加載的chunk，通過webpack內(nèi)置的加載器完成

實踐方案 內(nèi)聯(lián)資源重試

assets-reload

通過 script, link, img 等標(biāo)簽上的 onerror 回調(diào)來進行資源加載重試，并且替換的URL規(guī)則可定制。而背景圖則是讀取樣式表的規(guī)則，匹配到 background-img，則重新插入一條 background-img 樣式，用于重試。

具體的實現(xiàn)歡迎點擊該模塊參考。

另外配合webpack構(gòu)建自動化的能力，將這些onerror函數(shù)進行綁定。

script

通過這個模塊，再利用script-ext-html-webpack-plugin 配置script的onerror屬性

    new ScriptExtHtmlWebpackPlugin({
        custom: {
        test: /.js$/,
        attribute: "onerror="attackCatch(this)""
        }
    })

link

另外寫個簡單的插件將head處內(nèi)聯(lián)的link標(biāo)簽加上onerror屬性。

class MyPlugin {
  apply (compiler) {
    compiler.hooks.compilation.tap("css-attr-plugin", (compilation) => {
      compilation.hooks.htmlWebpackPluginAlterAssetTags
      .tapAsync("myPlugin", function (data, cb) {
        data.head.forEach(el=>{
          if(el.tagName === "link"){
            el.attributes.onerror = "attackCatch(this)";
          }
        })
        cb(null ,data);
      });
    })
  }
}

module.exports = MyPlugin

img

img目前暫未找到適配的插件，稍后將自行添加對應(yīng)的插件。也歡迎各位推薦

background-img 背景圖

背景圖這一塊，則因為沒有事件監(jiān)聽，只能進行全量替換，目前的應(yīng)用僅在測試域名環(huán)境下，將所有背景圖資源替換為當(dāng)前域名下。

webpack內(nèi)置異步加載器

webpack-plugin-import-retry

閱讀了webpack資源加載器部分的代碼，重寫了下加載器部分，實現(xiàn)了重試的能力。同時支持，傳入格式化URL函數(shù)用于自定義重試時的鏈接。

對加載失敗的chunk,進行重試。

一個chunk，有時候會包括 JS及CSS資源，其中一個加載失敗便會發(fā)起重試，直到有一個資源重試了2次就判斷為失敗。

通過資源加載重試，可大大減少 router 中,加載異步的頁面文件時，失敗而導(dǎo)致白屏的問題。

/******/     __webpack_require__.oldE = __webpack_require__.e;
/******/     __webpack_require__.e = function newRequireEnsure (chunkId, options) {
/******/                         return __webpack_require__.oldE(chunkId, options).then(function () {}, function (err) {
/******/                             console.error(err);
/******/                             var type;
/******/                             if (/.*.css??/.test(err.request)) {
/******/                                 type = "LINK";
/******/                             } else if (/.*.js??.*/.test(err.request)) {
/******/                                 type = "SCRIPT";
/******/                             }
/******/                             if (options === undefined) {
/******/                                 options = {
/******/                                     LINK: 0,
/******/                                     SCRIPT: 0
/******/                                 };
/******/                             }
/******/                             options[type]++;
/******/                             // 最小值為1
/******/                             if (options[type] <= 2) {
/******/                                 return newRequireEnsure(chunkId, options);
/******/                             }
/******/                         })
/******/                     }

重試規(guī)則

我們項目中，前端部署的架構(gòu)為將前端項目文件發(fā)布到自己的靜態(tài)資源服務(wù)器，CDN再來進行回源請求文件。

URL僅為域名不同，路徑相同。

因此，我們的重試規(guī)則為加上reloadAssets=1參數(shù)，用于標(biāo)識是第幾次重試。

第二次重試時，將CDN域名替換為當(dāng)前域名。

因為CDN域名也會有不穩(wěn)定的時候，將CDN域名替換為當(dāng)前訪問的域名，成功率會高些。

因為不同業(yè)務(wù)的CDN資源替換為主站資源路徑未必相同。因此都支持自定義規(guī)則。

測試域名應(yīng)用

對于測試環(huán)境，我們一般會啟用一個測試域名用于訪問。

此時，增量文件尚未發(fā)布到CDN，導(dǎo)致訪問測試域名時，增量文件請求不到，而為此提前將增量文件發(fā)布到線上，則比較麻煩。

因此，我們的自定義規(guī)則內(nèi)，會添加是否為測試環(huán)境的判斷，如果為測試環(huán)境，第一次重試的時候就直接替換為當(dāng)前的測試域名進行訪問。

以此達到同一套代碼適配不同域名。

GPU云服務(wù)器云服務(wù)器加載資源 cdn靜態(tài)資源加載慢前端cdn加速資源 js前端加載數(shù)據(jù)

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/102102.html

發(fā)表評論

登陸后可評論

0條評論

Prasanta

男|高級講師

我要關(guān)注我要私信

TA的文章

網(wǎng)站虛擬主機有什么用-虛擬主機有什么用？

閱讀 3320·2021-09-22 15:58
手把手教你學(xué)Vue-3(路由)

閱讀 1783·2019-08-30 14:17
面試常見問題——垂直居中的幾種方法

閱讀 1777·2019-08-28 18:05
移動端下拉刷新頭實現(xiàn)原理及代碼實現(xiàn)

閱讀 1570·2019-08-26 13:33
數(shù)組去重(es5,es6)

閱讀 738·2019-08-26 12:20
throttle函數(shù)與debounce函數(shù)

閱讀 667·2019-08-26 12:18
從零開始寫一個輪播

閱讀 3259·2019-08-26 11:59
從了解Hash和Html5 History 到簡單實現(xiàn)路由

閱讀 1461·2019-08-26 10:36

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

前端資源加載重試

相關(guān)文章

淺析前端上傳

防雪崩利器：熔斷器 Hystrix 的原理與使用

防雪崩利器：熔斷器 Hystrix 的原理與使用

XXL-JOB v1.9.1，分布式任務(wù)調(diào)度平臺

發(fā)表評論

0條評論

Prasanta

男|高級講師

TA的文章

網(wǎng)站虛擬主機有什么用-虛擬主機有什么用？

手把手教你學(xué)Vue-3(路由)

面試常見問題——垂直居中的幾種方法

移動端下拉刷新頭實現(xiàn)原理及代碼實現(xiàn)

數(shù)組去重(es5,es6)

throttle函數(shù)與debounce函數(shù)

從零開始寫一個輪播

從了解Hash和Html5 History 到簡單實現(xiàn)路由

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

前端資源加載重試

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！