手机登录/注册
X
登录
https://github.com/Nikaple/assets-retry/blob/master/README-cn.md
npm i assets-retry -S
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>
标签中,并置于所有资源开始加载之前。
https://github.com/Nikaple/assets-retry/blob/master/dist/assets-retry.umd.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,只要考虑到域名切换方便,而且都是大平台
<script>
//复制assets-retry.umd.js代码
</script>
<script>
window.assetsRetryStatistics = window.assetsRetry({
domain: ['cdn.jsdelivr.net/npm', 'unpkg.com'],
});
</script>