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

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

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

目前常見(jiàn)的前端資源分為

script 腳本

css 樣式文件

img 圖片

background-img 背景圖

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

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

img圖片

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

assets-reload

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

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

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

通過(guò)這個(gè)模塊，再利用script-ext-html-webpack-plugin 配置script的onerror屬性

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

另外寫(xiě)個(gè)簡(jiǎn)單的插件將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目前暫未找到適配的插件，稍后將自行添加對(duì)應(yīng)的插件。也歡迎各位推薦

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

webpack-plugin-import-retry

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

對(duì)加載失敗的chunk,進(jìn)行重試。

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

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

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

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

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

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

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

因?yàn)镃DN域名也會(huì)有不穩(wěn)定的時(shí)候，將CDN域名替換為當(dāng)前訪問(wèn)的域名，成功率會(huì)高些。

因?yàn)椴煌瑯I(yè)務(wù)的CDN資源替換為主站資源路徑未必相同。因此都支持自定義規(guī)則。

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

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

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

以此達(dá)到同一套代碼適配不同域名。