unpkg 与 npm 的基本介绍

定义

特点

原理

使用

npm安装流程

npm install

npm update

registry

区别

总结

定义

UNPKG是一个基于npm registry 的静态资源 CDN 服务，它可以快速获取和使用任何JavaScript包，无需安装任何软件或包。UNPKG可以从NPM仓库中获取任何包，支持直接在浏览器中使用和在Node.js中使用。

特点

快速：UNPKG使用CDN加速，可以提供更快的包下载速度，尤其是对于全球用户来说。
零配置：UNPKG不需要任何配置，可以直接在浏览器中使用，非常方便。
支持npm仓库：UNPKG可以快速从npm仓库获取JavaScript包。
可以直接在HTML文件中使用：UNPKG可以直接在HTML文件中使用，不需要经过打包处理。
版本自由：UNPKG支持通过URL查询参数来控制包的版本、文件和格式等。

原理

访问 upkg 地址时，在回源服务里面根据 URL 参数，去 npm registry 下载对应的 npm 包，解压后响应对应的文件内容。

使用

UNPKG的使用非常简单，只需在浏览器中打开UNPKG网站，搜索要使用的包，并复制其链接地址，然后将链接地址添加到项目的HTML文件中即可。例如，对于jQuery 3.6.0，链接地址为：https://unpkg.com/jquery@3.6.0/dist/jquery.min.js。

npm安装流程

NPM（Node Package Manager）——node包管理器。因为有NPM，只需执行一行npm install命令，就能安装别人写好的模块。

npm install

安装之前npm install会先检查node_modules目录之中是否已经存在指定模块。如果存在，就不再重新安装，即使远程仓库已经有了一个新版本也是如此。如果 npm 要强制重新安装，可以使用 -f 或 --force 参数。

npm install <packageName> --force

npm update

如果想更新已安装模块，就要用到npm update命令。

npm update <packageName>

它会先到远程仓库查询最新版本，然后查询本地版本。如果本地版本不存在，或者远程版本较新，就会安装。

registry

npm update命令怎么知道每个模块的最新版本呢？答案是 npm 模块仓库提供了一个查询服务，叫做 registry。以 npmjs.org 为例，它的查询服务网址是 registry.npmjs.org/ 。这个网址后面跟上模块名，就会得到一个 JSON 对象，里面是该模块所有版本的信息。比如，访问 registry.npmjs.org/react，就会看到 react 模块所有版本的信息。因npm view还有一些别名，所以下面几个命令的效果是一样的。
npm view react
npm info react
npm show react
npm v react
registry 网址的模块名后面，还可以跟上版本号或者标签，用来查询某个具体版本的信息。比如访问 registry.npmjs.org/react/v0.17… ，就可以看到 React 的 0.17.6 版。返回的 JSON 对象里面，有一个dist.tarball 属性，是该版本压缩包的网址。到这个网址下载压缩包，在本地解压，就得到了模块的源码。npm install 和 npm update命令，都是通过这种方式安装模块的。
{dist: { shasum: '2a57c2cf8747b483759ad8de0fa47fb0c5cf5c6a', tarball: 'http://registry.npmjs.org/react/-/react-0.17.6.tgz' }
}
将第三方包安装到node_modules后，每个包的package.json文件中通过main字段或moudule字段告知了该包的入口文件。在我们使用import x from xxx语句调用第三方库的方法时，就通过入口文件找到了相应的功能。

区别

【使用时】

NPM是安装第三方包到本地使用
CDN是通过链接访问，让用户的访问从距离他们最近的站点去获取到这些资源，缩短传输的距离，达到一个轻量、轻快的体验效果，当然网络不好的时候，资源请求会挂掉。

【打包时】

会把NPM依赖的包打到本项目中，占用包的体积
CDN通过链接访问，不打到本地，能减少一些包带来巨大的体积

总结

UNPKG的优点是快速、简单和易用，特别适合于快速开发和测试。但是，由于UNPKG不支持版本锁定，可能会出现版本问题，此外，由于UNPKG是一个公共CDN服务，可能存在安全问题。

开发过程中，要根据实际情况有选择的使用两种资源的引入方式，既能使用NPM按需引入的优势，又可以享受CDN的优势。

如果只是按需引入了很少的依赖包也是没有必要用CDN引入的，因为根本问题是依赖包太大才需要用CDN的高带宽去解决。使用NPM安装第三方包，打包项目时会把相应的文件打包到本项目中，理论上使用本地文件肯定比从网络上去请求一个文件要更快一些。如果没有多少资源文件的话，强行并发下载，会产生多线程小文件的I/O瓶颈。

参考文章：

如何看待 unpkg cdn?

使用第三方库时CDN引入和NPM安装有什么区别？