zan-cdn-fallback

### 原理

latest

npm

Version: 0.0.6

Version published: 9 years ago

Maintainers: 1

Created: 5 years ago

Source

cdn fallback

原理

当js加载失败时会触发onerror事件，所以拿到加载失败的url，把host换成备用的，然后重新加载。

例如：目前我们使用的cdn域名有两个： b.yzcdn.cn、su.yzcdn.cn，当我们去请求 https://b.yzcdn.cn/v2/vendor/jquery.js 时，如果失败了，我们就把b.yzcdn.cn换成su.yzcdn.cn重新加载一个这个js文件。

这种方式虽然能保证资源的重新加载，但对js这种有严格的执行顺序的有的时候重新加载会出错。

使用方式

要保证每个文件都能回退重新加载，那就得把cdn-fallback代码放到head的第一个script标签里，并保证这段代码是inline进去的。这样在window下会有一个_cdnFallback方法，所有通过src加载的js都添加上onerror="_cdnFallback(this)"处理方法，如下：

<script onerror="_cdnFallback(this)" src="https://b.yzcdn.cn/v2/vendor/jquery.min.js"></script>

iron项目

在iron里已经存在一个压缩过的文件了，在 resource/static/cdn_fallback.min.js中，使用 $view->loadCSS、$view->loadJS 来创建link和script标签。

在base.html里要添加$view->loadStaticContent('cdn_fallback.min.js');来加载cdn-fallbackjs到head里。

<head>
    <script>
    	<?php $view->loadStaticContent('cdn_fallback.min.js'); ?>
    </script>
    ...
</head>

如果自己手动写script src，那只要添加上 onerror处理就ok了。

node项目

在 base.html head 标签里面添加下面一段代码

{% block head_script %}
 {{ inlineJs('/node_modules/@youzan/cdn-fallback/dist/index.js') }}
{% endblock %}

Zan 框架里面的 loadJs 方法默认已经加了 onerror="_cdnFallback(this)"，业务方无需再手动添加；如果自己手动写script src，那只要添加上 onerror处理就ok了。

其它项目

把cdn-fallback包安装到本地，再把cdn-fallback/dist/index.js放到 html的head里。

日志记录

默认情况下加载失败会打 5% 的日志到日志平台： log.qima-inc.com。当10分钟超过200值就会报警。由于网络抖动，偶而保一次警是正常的。如果持续报警，那就得报告冬瓜处理

FAQs

What is zan-cdn-fallback?

Is zan-cdn-fallback well maintained?

Package last updated on 10 Aug 2017

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install