前端資源加載重試

時間 2019-11-09

標籤前端資源加載重試简体版

原文原文鏈接

介紹

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

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

資源分類

目前常見的前端資源分爲html

script 腳本
css 樣式文件
img 圖片
background-img 背景圖

而在 webpack 構建體系裏，根據加載方式能夠細分爲前端

內聯到html的script,link標籤
img圖片
import() 或 require.ensure 異步加載的chunk，經過webpack內置的加載器完成

實踐方案

內聯資源重試

assets-reloadjava

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

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

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

script

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

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