解决CDNJS访问太慢的问题

发表于 更新于

CDNJS是一个JS资料库，可以直接在网页上应用它上面拥有的一些JS文件。为什么不直接引用自己下载下来的库而要引用上面的文件呢？因为引用上面的文件可以使用户浏览网站的速度更佳，可以提高用户体验。Next主题的CDNJS直接调用的https://cdnjs.cloudflare.com, 按Next主题官方说法

Particularly, if you are a Chinese blogger or most of your visits come from China, please note that the CDNJS is blocked in some parts of China, don't use it as your CDN provider.

Next主题默认检测网站根目录安装的插件，将其视为内部的插件，对于某些未检测到的插件视为第三方插件。知道这个特性后，我们首先要做的就是安装@next-theme/plugins, 这样适配Next主题的特定插件就会在托管的网站内部加载，这可以保证Next的各项功能正常工作。操作如下： 

1
2
diary --ThemeUpdate
npm install @next-theme/plugins

先更新Next主题的目的是匹配最新的@next-theme/plugins, 于是可以保证主题内部插件工作良好。然而Next主题的一些部分还采用了图标，这些图标并不在@next-theme/plugins范围内，其中最重要的local-search插件也会受到影响，所以需要加载CDN网站到第三方插件。目前国内有很多 NPM 的 CDN，可以支持相关包文件的高速访问下载，其中库比较全的CDN推荐以下三个：

其中Zstatic用到了镜像回源，也就是说只要访问一次，文件就会被存储到国内的服务器上，再也不用担心缓存过期了，所以网络文章建议优先用这个,但是在本博客主题上测试效果并不好。如果您使用 cdnjs.com 只需要替换 cdnjs.cloudflare.com 为 s4.zstatic.net 即可，如 

1
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
替换成 
1
<script src="https://s4.zstatic.net/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

如果您使用 unpkg.com 只需要替换 unpkg.com 为 s4.zstatic.net/npm 即可，如 

1
<script src="https://unpkg.com/react@16.7.0/umd/react.production.min.js"></script>
替换成 
1
<script src="https://s4.zstatic.net/npm/react@16.7.0/umd/react.production.min.js"></script>

批量替换代码： 

1
2
find . -type f -exec sed -i 's#https://unpkg.com#https://s4.zstatic.net/npm#g' {} +
find . -type f -exec sed -i 's#https://cdnjs.cloudflare.com#https://s4.zstatic.net#

  • Hexo Next主题在V8.19.0版本后就支持自定义cdnjs了，所以配置了s4.zstatic.net, 测试访问速度可以。2024年01月22日发现本博客的PDF组件无法使用，于是判断是s4.zstatic.net同步的js不全导致，更换为cdn.onmicrosoft.cn 或mirrors.sustech.edu.cn/cdnjs后问题解决，尽管在网络上看到文章推荐使用前者，但是在博客中表现来看后二者更佳，并且南科大镜像更加快速一些，完美适配了我的Next主题。
  • 2024年09月27日, 南方科技大学的cdn镜像访问出现问题，于是为保证网站正常访问不得不修复此问题。经过研究，安装@next-theme/plugins后，可以保证PDF等Next主题依赖的插件由站内加载，其他部分则由cdn镜像加载，于是多数的镜像均可以正常使用了，为确保访问的稳定重新切换为s4.zstatic.net, 经测试效果良好.