@grewer/assets-retry
v0.3.2
Published
fork了原项目,做出了一下改变:
Downloads
3
Readme
@grewer/assets-retry
fork了原项目,做出了一下改变:
- 去除了 css, 图片 的加载错误
此库是针对 cdn, 而 cdn 90%都是 js, css 的 cdn 显得有些鸡肋, 而且去除这些还压缩了体积
- 去除了 onSuccess 事件
因为一个网页会有很多链接, 如果每次加载成功都要进行 load 成功的事件处理, 也显示有些鸡肋 同样的,去除此监听也减小了库的体积
- 关于 async 的暂时去除, 但是后续可能加入
下载:
npm i -D @grewer/assets-retry
English | 简体中文
Auto Assets Retry
A tiny non-intrusive library to retry your assets (scripts, stylesheets, images) when they failed to load, only 3 KB gzipped, even works with dynamic import!
Demo URL
Table of Contents
Installation
Install with npm
$ npm install assets-retry --save
Then, inject the library at the beginning of the page with proper webpack configurations. See example
Use inline script directly
If you don't want to spend your time fiddling around with webpack configurations, you can inline the minified file with a script tag, and place it at the beginning of the page.
Usage
All you have to provide is the domain parameter, which are the domains to retry when assets failed to load.
// information of assets
var assetsRetryStatistics = window.assetsRetry({
// domain list, only resources in the domain list will be retried.
domain: ['your.first.domain', 'your.second.domain/namespace'],
// maximum retry count for each asset, default is 3
maxRetryCount: 3,
// onRetry hook is how you can customize retry logic with, default is x => x
onRetry: function(currentUrl, originalUrl, statistics) {
return currentUrl
},
// for a given resource (except background-images in css),
// either onSuccess or onFail will be eventually called to
// indicate whether the resource has been successfully loaded
onSuccess: function(currentUrl) {
console.log(currentUrl, assetsRetryStatistics[currentUrl])
},
onFail: function(currentUrl) {
console.log(currentUrl, assetsRetryStatistics[currentUrl])
}
})
When the initialization is finished, following content gains the power of retrying automatically.
- [x] All
<script>
tag in html - [x] All
<link rel="stylesheet">
tag in html (properly configured) - [x] All
<img>
tag in html - [x] All dynamic script element created with
document.createElement
, such as dynamic import. - [x] All
background-image
incss
Config
The assetsRetry
function takes an AssetsRetryOptions
, which is defined as follows:
interface AssetsRetryOptions {
maxRetryCount: number
onRetry: RetryFunction
onSuccess: SuccessFunction
onFail: FailFunction
domain: Domain
}
type RetryFunction = (
currentUrl: string,
originalUrl: string,
retryCollector: null | RetryStatistics
) => string | null
interface RetryStatistics {
retryTimes: number
succeeded: string[]
failed: string[]
}
type SuccessFunction = (currentUrl: string) => void
type FailFunction = (currentUrl: string) => void
type Domain = string[] | { [x: string]: string }
domain
: domain list, can be array or object type- array type: assets will be retried from each domain in sequence, until it's loaded successfully or exceed maximum retry times.
- object type:
{ 'a.cdn': 'b.cdn', 'c.cdn': 'd.cdn' }
means failed assets froma.cdn
should be retried fromb.cdn
, failed assets fromc.cdn
should be retried fromd.cdn
maxRetryCount
: maximum retry count for each asset, default is 3onRetry
: hook function which was called before trying to load any assets- the function takes 3 parameters:
currentUrl
: next url to tryoriginalUrl
: last failed urlretryCollector
: information collector for current asset, if the asset was fromurl()
function defined in your stylesheets, it will be null. When it's notnull
, it's an object with following properties:retryTimes
: current retry times (starts from 1)failed
: failed assets list(may be duplicated when retrying from the same domain multiple times)succeeded
: succeeded assets list
- the function must return a
String
ornull
:- when null was returned, current retry will be terminated.
- when string was returned, current retry url will be the return value.
- the function takes 3 parameters:
onSuccess
: hook function which was called when asset has loadedcurrentUrl
: return the asset name which you can use to get statistics from information collector
onFail
: hook function which was called when asset failed to loadcurrentUrl
: return the asset name which you can use to get statistics from information collector
FAQ
Q: Stylesheets or background images are not retried from backup domain, why?
A: Due to security policies of browsers, access to
cssRules
is not allowed for cross origin stylesheets by default. To fix this:- Add
crossorigin="anonymous"
attribute on link element for cross origin stylesheets. - Make sure that Access-Control-Allow-Origin HTTP Header is correct.
- Add
Browser Support
| | | | | | | | | | :--------------------------------------------------------------------------: | :----------------------------------------------------------------------: | :----------------------------------------------------------------------------: | :---------------------------------------------------------------------------------: | :------------------------------------------------------------------------: | :--------------------------------------------------------------------------: | :-------------------------------------------------------: | :----------------------------------------------------------------------------: | | 47+ ✔ | 15+ ✔ | 32+ ✔ | 10+ ✔ | 34+ ✔ | 10+ ✔ | 10+ ✔ | 4.4+ ✔ |
NPM scripts
npm t
: Run test suitenpm start
: Runnpm run build
in watch modenpm run test:watch
: Run test suite in interactive watch modenpm run test:prod
: Run linting and generate coveragenpm run build
: Generate bundles and typings, create docsnpm run lint
: Lints codenpm run commit
: Commit using conventional commit style (husky will tell you to use it if you haven't :wink:)
Acknowledgement
- The example projects are based on amazing RealWorld demo apps.
- Cross browser testing are based on the rather excellent BrowserStack UI testing technology.