Loading... 1. 通过 jsDelivr + Github 实现免费 CDN (静态资源)加速 ![image.png](https://xug.cc/usr/uploads/2023/09/1001533194.png) 2. 发布一版release包 ![image.png](https://xug.cc/usr/uploads/2023/09/2409296176.png) ![image.png](https://xug.cc/usr/uploads/2023/09/3079330770.png) 3. 通过`jsDelivr`引用 GitHub 资源的方法: `https://cdn.jsdelivr.net/gh/<用户名>/<仓库名>@<发布版本号>/<文件路径>` 我们访问下试试(超过50M无法显示,可以直接定位到指定文件看是否可以访问) ![image.png](https://xug.cc/usr/uploads/2023/09/2268151721.png) 例如:[https://cdn.jsdelivr.net/gh/ixianhao/HarmonyOS-Sans@1.0.0/HarmonyOS_Sans_SC/HarmonyOS_Sans_SC_Bold.woff](https://cdn.jsdelivr.net/gh/ixianhao/HarmonyOS-Sans@1.0.0/HarmonyOS_Sans_SC/HarmonyOS_Sans_SC_Bold.woff) 4. 注意:版本号不是必需的,只是为了区分新旧资源;如果不使用版本号,将会直接引用最新资源。除此之外还可以使用某个范围内的版本,查看所有资源等,具体使用方法如下: * 加载任何 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 及自定义皮肤](https://xug.cc/go/XbYXXwxW/) * **第二种**:放到 `public/index.html`的 head 或 body 内。 ```xml <!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`引入: ```dart // src/main.js import 'roboto-fontface/css/roboto/roboto-fontface.css' ``` 然后在`vue.config.js`内配置: ```jsx // 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 地址了: ![image.png](https://xug.cc/usr/uploads/2023/09/1207904734.png) Last modification:October 27, 2023 © Allow specification reprint Support Appreciate the author AliPayWeChat Like 如果觉得我的文章对你有用,请随意赞赏