静态资源自动重试

2022-06-30 21:46:19
2024-06-17 16:42:11

官方文档

http 复制代码
https://github.com/Nikaple/assets-retry/blob/master/README-cn.md

方法一:

安装命令

shell 复制代码
npm i assets-retry -S

webpack配置

js 复制代码
const fs = require('fs');

plugins: [
    new HtmlWebpackPlugin({
      templateParameters: {
        assetsRetry: fs.readFileSync(require.resolve("assets-retry"))
      },
      template: 'index.ejs'
    }),
    new MiniCssExtractPlugin({ filename: 'styles.css' })
  ]

方法二:

直接通过 script 标签引用

如果你懒得折腾 webpack 配置,可以将 assets-retry.umd.js 直接内联到 <head> 标签中,并置于所有资源开始加载之前。

http 复制代码
https://github.com/Nikaple/assets-retry/blob/master/dist/assets-retry.umd.js

快速上手

js 复制代码
//使用起来非常简单,只需要初始化并传入域名列表即可:
// assetsRetryStatistics 中包含所有资源重试的相关信息
var assetsRetryStatistics = window.assetsRetry({
    // 域名列表,只有在域名列表中的资源,才会被重试
    // 使用以下配置,当 https://your.first.domain/js/1.js 加载失败时
    // 会自动使用 https://your.second.domain/namespace/js/1.js 重试
    domain: ['your.first.domain', 'your.second.domain/namespace'],
    // 可选,最大重试次数,默认 3 次
    maxRetryCount: 3,
    // 可选,通过该参数可自定义 URL 的转换方式
    onRetry: function(currentUrl, originalUrl, statistics) {
        return currentUrl
    },
    // 对于给定资源,要么调用 onSuccess ,要么调用 onFail,标识其最终的加载状态
    // 加载详细信息(成功的 URL、失败的 URL 列表、重试次数)
    // 可以通过访问 assetsRetryStatistics[currentUrl] 来获取
    onSuccess: function(currentUrl) {
        console.log(currentUrl, assetsRetryStatistics[currentUrl])
    },
    onFail: function(currentUrl) {
        console.log(currentUrl, assetsRetryStatistics[currentUrl])
    }
})

参考示例

之所以用了jsdelivr和unpkg,只要考虑到域名切换方便,而且都是大平台

js 复制代码
<script>
   //复制assets-retry.umd.js代码
</script>
<script>
      window.assetsRetryStatistics = window.assetsRetry({
        domain: ['cdn.jsdelivr.net/npm', 'unpkg.com'],
      });
</script>
目录
暂无评论,欢迎留下你的评论

运营需要亿点资金维持,您的支持,是小白龙创作的动力!!!

昵称
留言
赞赏金额