前端资本加载重试

2024年5月18日 144次阅读 来源: WilsonLiu95

引见

关于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，致使接见测试域名时，增量文件要求不到，而为此提早将增量文件宣布到线上，则比较贫苦。

因而，我们的自定义划定规矩内，会增加是不是为测试环境的推断，假如为测试环境，第一次重试的时刻就直接替代为当前的测试域名举行接见。

以此到达统一套代码适配差别域名。

    原文作者：WilsonLiu95
    原文地址: https://segmentfault.com/a/1190000018275641
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞