# assets-reload

> switch all assets cdn name (script,link,background-image,img). when you open one website in a test domain you can switch cdn name to location.hostname

Latest version **1.3.1** (published 2019-03-21) · MIT license · 0 weekly downloads

## Install

```sh
npm install assets-reload
pnpm add assets-reload
yarn add assets-reload
bun add assets-reload
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.3.1 |
| Published | 2019-03-21 |
| First published | 2019-02-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 24.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | wilsonliuxyz@gmail.com |
| Maintainers | wilsonsliu95 |
| Keywords | cdn, name, switch, cdn, switch, test, domain |

## Links

- npm: https://www.npmjs.com/package/assets-reload
- Repository: https://github.com/WilsonLiu95/tfnpm
- Homepage: https://github.com/WilsonLiu95/tfnpm/tree/master/packages/assets-reload#readme
- Issues: https://github.com/WilsonLiu95/tfnpm/issues
- npm.io page: https://npm.io/package/assets-reload

## Alternatives

- [duck](https://npm.io/package/duck.md) — 4.2M weekly downloads
- [ava](https://npm.io/package/ava.md) — 560.2K weekly downloads
- [storybook-addon-module-mock](https://npm.io/package/storybook-addon-module-mock.md) — 71.7K weekly downloads
- [vest](https://npm.io/package/vest.md) — 50.1K weekly downloads
- [@ethereum-waffle/mock-contract](https://npm.io/package/@ethereum-waffle/mock-contract.md) — 40.0K weekly downloads

## Recent versions

- 1.3.1 (latest) — 2019-03-21
- 1.3.0 — 2019-03-21
- 1.2.0 — 2019-03-21
- 1.1.0 — 2019-02-22

## README

# assets-reload

## intro

前端资源重载，大流量的网站，就得考虑资源加载失败的情况下，用户白屏等问题。

因此必须对资源进行重载, 本模块通过 `script, link, img`等标签上的 `onerror`回调来进行资源加载重试，并且规则可定制。

并且针对背景图也提供了替换方案。

## when use

```javascript
(function() {
  try {
    var isInTestDomain = location.hostname.indexOf("www.qq.com") > 0;
    // 资源重载自定义规则函数
    var cdnHostname = "www-img.tenpay.com";
    function assetsReloadFunc(url, type, sourceEl) {
      // 线上静态资源都请求cdn 只对cdn资源进行重试
      var isCdn = url && url.indexOf(cdnHostname) != -1;
      if (!isCdn) {
        return false;
      }

      var reloadTimes = 0;
      var urlSearch = url.split("?")[1];

      // 查看重试了几次
      if (urlSearch) {
        var matchRes = urlSearch.match(/reloadAssets=(\d+)&?/);
        if (matchRes && matchRes.length > 1) {
          reloadTimes = Number(matchRes[1]);
        }
      }
      // 非测试环境 第一次重试cdn域名资源
      var replaceUrl;
      if (isInTestDomain && reloadTimes == 0) {
        replaceUrl =
          url.replace(cdnHostname, location.hostname) +
          (urlSearch ? "&" : "?") +
          "reloadAssets=1";
        return replaceUrl;
      }
      if (!isInTestDomain) {
        if (reloadTimes == 0) {
          return url + (urlSearch ? "&" : "?") + "reloadAssets=1";
        } else if (reloadTimes <= 1) {
          // 此处阈值可以调整
          replaceUrl = url.replace(cdnHostname, location.hostname);
          return replaceUrl.replace(
            "reloadAssets=" + reloadTimes,
            "reloadAssets=" + (1 + reloadTimes)
          );
        }
      }
    }
    var assetsReloadItem = new AssetsReload(assetsReloadFunc);
    if (isInTestDomain) {
      // 如果标签上都没有绑定  onerror 则可以直接进行全量替换重试，不过建议 写上 onerror 而非全量替换
      assetsReloadItem.reloadAll("SCRIPT");
      assetsReloadItem.reloadAll("LINK");
      assetsReloadItem.reloadAll("IMG");
      setTimeout(function() {
        // 替换背景图
        assetsReloadItem.reloadBackgroundImage();
      }, 800);
    }
    // 全局绑定 attackCatch 函数
    // 在 <script src="test.js" onerror="attackCatch(this)">
    window.attackCatch = function(htmlNode) {
      assetsReloadItem.reload(htmlNode);
    };
  } catch (err) {
    console.error(err);
  }
})();
```

---
_Source: https://npm.io/package/assets-reload · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._