通过 jsDelivr + Github 实现免费 CDN (静态资源)加速

September 21, 2023

646 views

2961 words

通过 jsDelivr + Github 实现免费 CDN (静态资源)加速
发布一版release包
通过jsDelivr引用 GitHub 资源的方法：
https://cdn.jsdelivr.net/gh/<用户名>/<仓库名>@<发布版本号>/<文件路径>
我们访问下试试（超过50M无法显示，可以直接定位到指定文件看是否可以访问）

例如：https://cdn.jsdelivr.net/gh/ixianhao/HarmonyOS-Sans@1.0.0/HarmonyOS_Sans_SC/HarmonyOS_Sans_SC_Bold.woff
注意：版本号不是必需的，只是为了区分新旧资源；如果不使用版本号，将会直接引用最新资源。除此之外还可以使用某个范围内的版本，查看所有资源等，具体使用方法如下：

加载任何 Github 的发布(release)、提交(commit)或分支(branch)
https://cdn.jsdelivr.net/gh/<user>/<repo>@<version>/<file>
比如加载 jQuery v3.2.1
https://cdn.jsdelivr.net/gh/jquery/jquery@3.2.1/dist/jquery.min.js
使用版本范围而不是特定版本
https://cdn.jsdelivr.net/gh/jquery/jquery@3.2/dist/jquery.min.js
https://cdn.jsdelivr.net/gh/jquery/jquery@3/dist/jquery.min.js
完全省略版本或者使用@latest以获取最新版本
https://cdn.jsdelivr.net/gh/jquery/jquery/dist/jquery.min.js
https://cdn.jsdelivr.net/gh/jquery/jquery@latest/dist/jquery.min.js
将.min添加到任何JS/CSS文件中以获取缩小版本，如果不存在，将为会自动生成
https://cdn.jsdelivr.net/gh/jquery/jquery@3.2.1/src/core.min.js
在末尾添加/以获取资源目录列表
https://cdn.jsdelivr.net/gh/jquery/jquery/
https://cdn.jsdelivr.net/gh/jquery/jquery@3.2.1/dist/

放到自己的 cdn 供项目使用的，通常是不怎么变动的静态资源。比如本地化后经过配置的插件/第三方库、图标、字体等。
js 和自定义的 css 之类则修改几率较高，变动后文件名的 hash 值也变了，就不能很好地利用缓存。而具体如何使用这些 cdn 链接。有几种场景：

第一种：将插件集成到项目，直接看 vue3 集成 tinymce 及自定义皮肤
第二种：放到 public/index.html的 head 或 body 内。

<!DOCTYPE html>
<html lang="zh-Hans">
  <head>
    ...
    <link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">
    ...
  </head>
  <body>
    ...
  </body>
</html>

第三种：在(生产环境)打包的时候配置访问 cdn 前缀，将打包出来的这个资源传到 cdn 后删除本地这份。下面以谷歌字体为例：

roboto-fontface 外链加载太慢，我直接下载了这个包在main.js引入：

// src/main.js
import 'roboto-fontface/css/roboto/roboto-fontface.css'

然后在vue.config.js内配置：

// vue.config.js
const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV)

module.exports = defineConfig({
  // 一般不太会把整个 dist 目录放 cdn，建议只放变动频率低的本地化资源
  // 很少这样配置
  // publicPath: 
  //   IS_PROD
  //     ? 'https://cdn.jsdelivr.net/gh/aizawasayo/cdn-animal-home/dist/'
  //     : '/',
  chainWebpack: config => {
    if (IS_PROD) {
      config.module
        .rule('fonts')
        .test(/\.(woff2?|eot|ttf|otf)(\?.*)?$/i) // 匹配这些后缀的文件
        .set('type', 'asset') // 设置处理类型为静态资源
        .set('generator', {
          filename: `fonts/[name].[hash:8][ext]`, // 打包时输出到 dist/fonts/目录下
          publicPath:
            'https://cdn.jsdelivr.net/gh/aizawasayo/cdn-animal-home/dist/', // 访问前缀
        })
    }
  },
})

这样我们打包出来的文件用到字体的地方前缀都会被替换成 cdn 地址了：

通过 jsDelivr + Github 实现免费 CDN (静态资源)加速