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

1. 新建一个 git 仓库用来存放静态资源，最终把本地资源放到 GitHub 的一个仓库上。

2. 发布一版release包

发布成功可点击这里查看详情

3. 通过jsDelivr引用 GitHub 资源的方法：
   ⬇️
   https://cdn.jsdelivr.net/gh/<用户名>/<仓库名>@<发布版本号>/<文件路径>

我们访问下试试

4. 注意：版本号不是必需的，只是为了区分新旧资源；如果不使用版本号，将会直接引用最新资源。除此之外还可以使用某个范围内的版本，查看所有资源等，具体使用方法如下：

• 加载任何 Github 的发布(release)、提交(commit)或分支(branch)
  https://cdn.jsdelivr.net/gh//@/
  比如加载 jQuery v3.2.1
  https://cdn.jsdelivr.net/gh/jquery/[email protected]/dist/jquery.min.js

• 使用版本范围而不是特定版本
  https://cdn.jsdelivr.net/gh/jquery/[email protected]/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/[email protected]/src/core.min.js

• 在末尾添加/以获取资源目录列表
  https://cdn.jsdelivr.net/gh/jquery/jquery/
https://cdn.jsdelivr.net/gh/jquery/[email protected]/dist/

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

• 第一种：将插件集成到项目，直接看 vue3 集成 tinymce 及自定义皮肤

• 第二种：放到 public/index.html的 head 或 body 内。

  
    ...
    
    ...
  
  
    ...
  

• 第三种：在(生产环境)打包的时候配置访问 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 地址了：

这个 fonts 目录上传到 cdn 后就可以删掉了