前端常用CDN

什么是 unpkg 能力？

作为前端开发者，我们对 unpkg都不陌生，​它是一个基于 npm registry 的静态资源 CDN 服务​。

它提供了一种快捷的静态资源访问能力，只需要遵循约定的 URL 进行访问，即可在页面中加载任意 npm 包里面的文件内容。虽然前端的开发模式已经不像当年那么的轻量的，往往需要用 webpack 等构建后进行部署。但在很多轻量的场景下，往往希望直接引入公共的 npm 包，尤其是在 codepan 等文档和示例代码场景。

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

实现原理很简单，可以简单理解为：访问 upkg 地址时，在回源服务里面根据 URL 参数，去 npm registry 下载对应的 npm 包，解压后响应对应的文件内容。

语法如下：

unpkg.com/:package@:version/:file

国外CDN

• unpkg.com
• cdn.jsdelivr.net
• fastly.jsdelivr.net

​使用方法​：直接进官网，搜NPM包名使用。 ​缺点​：有时候不是很稳定，而且国内有些地方没法访问。

国内能用的

目前国内有很多NPM的CDN，可以高速支持相关包文件的访问下载，如：

• BootCDN: www.bootcdn.cn

​使用方法​：直接进官网，搜NPM包名使用。 ​缺点​：上面几个的CDN并不全，很多NPM上的包 在这些CDN上是找不到的。原因是，它们都是从CDNJS上同步的数据，CDNJS 并不会把所有的 NPM 包进行同步，所以当你需要的一些NPM包没有在CDNJS上面，你就用不了上面这些国内CDN了。

推荐

• jsd.onmicrosoft.cn(回源 jsDelivr，使用可参考jsDelivr)
• npm.onmicrosoft.cn (回源 UNPKG，使用可参考UNPKG)

jsd.onmicrosoft.cn 使用方式：

https://jsd.onmicrosoft.cn/npm/vditor@3.9.8/dist/index.min.js

npm.onmicrosoft.cn 使用方式：

https://npm.onmicrosoft.cn/vditor@3.9.8/dist/index.min.js