前端资源加载重试

介绍

对于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，致使访问测试域名时，增量文件请求不到，而为此提早将增量文件发布到线上，则比较麻烦。

所以，咱们的自定义规则内，会添加是否为测试环境的判断，若是为测试环境，第一次重试的时候就直接替换为当前的测试域名进行访问。

以此达到同一套代码适配不一样域名。