如何给前端js文件获取免费cdn加速

需求由来

好不容易找到一款支持全格式的markdown文档编辑器，但webpack打包后发现js文件竟然有8M多，哪怕进行了js压缩也有4m多。
如果用自己可怜的服务器带宽硬撑，估计几个人同时打开就垮了。七牛云虽然有免费的10G流量，但也换算下来也只能用一千多次，不现实。直到后来发现了jsDelivr这款良心平台。

jsDelivr

jsDelivr点击官网 一款开源的cdn。免费、快速、可靠！
Jsdelivr 网站是一个致力于为开发者提供数千种Javascript、CSS等超过1650多种 Libraries 加速的免费CDN服务，该平台是首个「打通中国大陆与海外的免费CDN服务」，网页开发者无须担心中国防火墙问题而影响使用。

支持开发者把js、css等静态资源发布到github、npm、WordPress，通过相应url实现免费cdn加速。

本文使用的是github方式实现cdn加速。

实现流程

1.在github上新建仓库xxx,如我的仓库名：mycdn （仓库必须是公开的）
2.把资源文件上传到git仓库 （文件不大于20M）
3.通过https://cdn.jsdelivr.net/gh/用户名/仓库名称@分支名称/文件路径 获取cdn地址。

实践

新建仓库

1.登陆github(如果没有先注册)，点击右上角的“+”号，新建仓库

2.填写仓库名称，如mycdn,仓库类型设置公开，也即是public

上传静态文件

提取cdn地址

1.获取上传文件所在的github地址。如我上传的index.bundle.js

如图或得地址：https://github.com/ajz2007/mycdn/blob/master/markdown-plus/index.bundle.js

从此地址得：

用户名：ajz2007
仓库名称：mycdn
分支名称：master
文件路径：markdown-plus/index.bundle.js（有markdown-plus是因为我把文件在markdown-plus这个文件夹，如果直接上传到根目录则直接是文件名）

通过换算格式：https://cdn.jsdelivr.net/gh/用户名/仓库名称@分支名称/文件路径 获取cdn地址。

得到cdn地址：
https://cdn.jsdelivr.net/gh/ajz2007/mycdn@master/markdown-plus/index.bundle.js

性能对比

1.没使用cdn前：

2.使用cdn加速后

总结：不仅速度由19秒缩短成了6.5，体积由4.3m压缩成了1m，大赞！！哈哈