前端資源加載重試

Prasanta 發布于2019-08-23 15:28 / 2273人閱讀

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

介紹

對于TO C的應用，用戶網絡千差萬別，總有各種網絡問題導致資源加載失敗，使得訪問時出現白屏，樣式錯亂等。資源加載重試，則是提高用戶體驗中重要的一環。

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

資源分類

目前常見的前端資源分為

script 腳本

css 樣式文件

img 圖片

background-img 背景圖

而在 webpack 構建體系里，根據加載方式可以細分為

內聯到html的script,link標簽

img圖片

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

實踐方案 內聯資源重試

assets-reload

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

具體的實現歡迎點擊該模塊參考。

另外配合webpack構建自動化的能力，將這些onerror函數進行綁定。

script

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

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

link

另外寫個簡單的插件將head處內聯的link標簽加上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目前暫未找到適配的插件，稍后將自行添加對應的插件。也歡迎各位推薦

background-img 背景圖

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

webpack內置異步加載器

webpack-plugin-import-retry

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

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

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

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

/******/     __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);
/******/                             }
/******/                         })
/******/                     }

重試規則

我們項目中，前端部署的架構為將前端項目文件發布到自己的靜態資源服務器，CDN再來進行回源請求文件。

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

因此，我們的重試規則為加上reloadAssets=1參數，用于標識是第幾次重試。

第二次重試時，將CDN域名替換為當前域名。

因為CDN域名也會有不穩定的時候，將CDN域名替換為當前訪問的域名，成功率會高些。

因為不同業務的CDN資源替換為主站資源路徑未必相同。因此都支持自定義規則。

測試域名應用

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

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

因此，我們的自定義規則內，會添加是否為測試環境的判斷，如果為測試環境，第一次重試的時候就直接替換為當前的測試域名進行訪問。

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

云服務器 GPU云服務器加載資源 cdn靜態資源加載慢前端cdn加速資源 js前端加載數據

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/102102.html

淺析前端上傳

摘要：項目上也用到很多上傳文件的地方，七牛云，阿里云，訊飛上傳都接觸過，所以在這里做一個記錄，總結一下前端上傳的幾種方式。類型的文件名七牛云上傳淺析是一個基于七牛開發的前端。 showImg(https://segmentfault.com/img/bVbvibu?w=1920&h=1080); 圖片，音頻，視頻等等這幾種常見的資源類型，如果需要從前端上傳到服務端，有幾種方式呢？不妨回顧一下...

terro 2019-08-26 10:13 評論0 收藏0
防雪崩利器：熔斷器 Hystrix 的原理與使用

摘要：前言分布式系統中經常會出現某個基礎服務不可用造成整個系統不可用的情況這種現象被稱為服務雪崩效應為了應對服務雪崩一種常見的做法是手動服務降級而的出現給我們提供了另一種選擇服務雪崩效應的定義服務雪崩效應是一種因服務提供者的不可用導致服務調用者的前言分布式系統中經常會出現某個基礎服務不可用造成整個系統不可用的情況, 這種現象被稱為服務雪崩效應. 為了應對服務雪崩, 一種常見的做法是手動服...

jayzou 2019-08-06 13:17 評論0 收藏0
防雪崩利器：熔斷器 Hystrix 的原理與使用

摘要：前言分布式系統中經常會出現某個基礎服務不可用造成整個系統不可用的情況這種現象被稱為服務雪崩效應為了應對服務雪崩一種常見的做法是手動服務降級而的出現給我們提供了另一種選擇服務雪崩效應的定義服務雪崩效應是一種因服務提供者的不可用導致服務調用者的前言分布式系統中經常會出現某個基礎服務不可用造成整個系統不可用的情況, 這種現象被稱為服務雪崩效應. 為了應對服務雪崩, 一種常見的做法是手動服...

JessYanCoding 2019-08-14 16:32 評論0 收藏0
XXL-JOB v1.9.1，分布式任務調度平臺

摘要：版本特性國際化調度中心實現國際化，支持中文英文兩種語言，默認為中文。調度中心提供觸發任務單次執行的服務，可根據業務事件靈活觸發。版本 V1.9.1 特性 1、國際化：調度中心實現國際化，支持中文、英文兩種語言，默認為中文。 2、調度報表新增運行中中狀態項； 3、調度報表優化，報表SQL調優并且新增LocalCache緩存（緩存時間60s），提高大數據量下報表加載速度； 4、修復打包...

沈建明 2019-08-15 14:17 評論0 收藏0