静态资源自动重试
2022-07-01 05:46:19
2024-11-21 03:25:05
官方文档
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>
目录