目录
定义
特点
原理
使用
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安装有什么区别?