前端资源加载重试

Prasanta 发布于2019-08-23 15:28 / 2408人阅读

摘要：资源加载重试，则是提高用户体验中重要的一环。对加载失败的进行重试。一个，有时候会包括及资源，其中一个加载失败便会发起重试，直到有一个资源重试了次就判断为失败。通过资源加载重试，可大大减少中加载异步的页面文件时，失败而导致白屏的问题。

介绍

对于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前端加载数据

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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