那些靠它它会倒的 CDN 资源—线上项目出现引用的 CDN 资源无法加载的问题（最近CDN不稳定）

起因

最近在打开一些线上项目，发现有些页面无法响应，即使有的响应了，但延迟很久。之前是没有这种情况的，于是乎打开了浏览器的 NetWork 看一下，发现有些 CDN 开头的资源文件一直在 pending 中无法加载。其他同事也反映了这种情况，然后初步断定是 CDN 不稳定造成的。

无法响应的资源，如图所示：

对策

俗话说：“靠墙墙会倒，靠人人会跑。靠天靠地，不如靠自己”
最后我们商量的结果是：「使用 OSS 自己搭建资源文件存储桶」

但是有人会问，那些打不开的资源从来来找？问的好，其实不难。

1. 找一些大公司的静态资源公共库，比如说：字节跳动静态资源公共库
2. 去 Github 上搜索相关项目，查找对应的资源包文件。
3. 根据使用的资源包，网上查找其网站，找到资源文件。

前端和后端所使用的资源都统一放到了 OSS 存储桶中，由组件名+版本号进行隔离，部分资源目录文件如下所示：

为了方便大家维护和更新，我们又将公共的资源文件使用 Git 进行管理，部分文件如图所示：

OSS 有读写的限制，我们一般设置的是 共有读-私有写，不过为了防止盗链，可以增加 referer 的限制。这样我们依赖的静态资源存储桶已经做好了，链接使用的是 OSS 的域名前缀 + 静态资源文件路径，替换到项目当中就行。

例子

我们有些后端写项目，喜欢使用 laravel-admin 这种低代码的扩展包，方便快速搭建好后台管理模块。但是它里面有些组件同样会依赖一些 CDN 的一些静态资源，如下所示：

那这种情况该如何处理呢？

• 重写写个包？ 虽然能彰显实力，但是太麻烦，还得上传 Packagist 。
• 重写这个组件类？ 对大多数人都能接受且能实现的。

参考 flatpickr的CDN失效了

# 重写DateMultiple
// 在 app/Admin/bootstrap.php 中添加
Encore\Admin\Form::extend('DateMultiple', App\Admin\Custom\DateMultiple::class);

然后新增重写类：

<?php
namespace App\Admin\Custom;

class DateMultiple extends \Encore\Admin\Form\Field\DateMultiple
{
    # https://unpkg.com/ 这个链接头可以换成 https://自己的OSS.com/ 
    protected static $css = [
        //'https://unpkg.com/flatpickr@4.6.13/dist/flatpickr.min.css',
        //'https://unpkg.com/shortcut-buttons-flatpickr@0.3.0/dist/themes/light.min.css',

        'https://自己的OSS.com/flatpickr@4.6.13/dist/flatpickr.min.css',
        'https://自己的OSS.com/shortcut-buttons-flatpickr@0.3.0/dist/themes/light.min.css',
    ];
    # https://unpkg.com/ 这个链接头可以换成 https://自己的OSS.com/ 
    protected static $js = [
        //'https://unpkg.com/flatpickr',
        //'https://unpkg.com/shortcut-buttons-flatpickr@0.1.0/dist/shortcut-buttons-flatpickr.min.js',
        //'https://unpkg.com/flatpickr@4.6.6/dist/l10n/zh.js',

        'https://自己的OSS.com/flatpickr',
        'https://自己的OSS.com/shortcut-buttons-flatpickr@0.1.0/dist/shortcut-buttons-flatpickr.min.js',
        'https://自己的OSS.com/flatpickr@4.6.6/dist/l10n/zh.js',
    ];
}

结语

• CDN 真的会不稳定，之前也有类似的经历。建议以后有新的资源引入不是用外部的，使用自己的。
• 幸好发现的早，要不然客户那边发现了，他们才不管三七二十一，直接电话速来问候。
• 希望大家都能避免类似的情况，减少不必要的麻烦。

本作品采用《CC 协议》，转载必须注明作者和本文链接