静态资源自动重试

2022-06-30 21:46:19

2024-07-27 00:50:47

官方文档

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>

暂无评论，欢迎留下你的评论

静态资源自动重试

官方文档

方法一：

安装命令

webpack配置

方法二：

直接通过 script 标签引用

快速上手

参考示例

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

直接通过 `script` 标签引用