分享背景
日常开发过程中，我习惯了通过NPM包引入资源的方式，在使用高德地图的可视化组件时，在官网demo中给出的示例却是这样的：
这种通过script标签形式的引入组件的使用方式，勾起了我久远的回忆，那还要追溯到刚学前端接触前端三剑客的时候，最简单的demo中会给出HTML、CSS、SCRIPT在同一个文件下该如何使用的范例。这个高德的demo让我立马抛出了一些问题：
- CDN引入资源包和NPM引入资源包有什么区别？
- 为什么用户量较大的高德地图在官网示例中要通过CDN的方式给出demo，而不是NPM的方式给出demo？
为了解答这两个问题，就有了今天这篇分享。
先简单介绍下这两种方式的使用机制。
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 reactnpm info reactnpm show reactnpm 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语句调用第三方库的方法时，就通过入口文件找到了相应的功能。
"main": "dist/cjs/index.js",
"module": "dist/esm/index.js",
CDN引入数据
CDN（Content Delivery Network）——内容分发网络。源站内容(image、html、js、css等) 都属于内容分发。
CDN工作原理
将源站的资源缓存CDN各个节点上，当请求命中了某个节点的资源缓存时，立即返回客户端，避免每个请求的资源都通过源站获取，避免网络拥塞、缓解源站压力，保证用户访问资源的速度和体验，有效解决网络带宽小、用户访问量大、网点分布不均等问题。
访问中心节点服务器 和 访问CDN服务器
CDN机制可访问不同的服务器
CDN发展历史简介
CDN 诞生于二十多年前，随着主干网络压力的逐渐增大，长传的请求效果越来越差。1995年，MIT 的应用数学教授 Tom Leighton 和几位研究人员一起尝试用数学算法解决了网络拥堵问题，后于 1998 年 8 月 20 日正式成立公司。
在接下来的20年中，CDN行业历经变革和持续发展，行业也涌现出很多云CDN厂商。阿里云CDN是2008年从淘宝CDN起家，在2014年正式发展成为阿里云CDN的，它不仅为阿里巴巴集团所有子公司提供服务，同时也将自身的资源、技术以云计算的方式输出。
CDN的作用
当下的互联网应用都包含大量的静态内容，但静态内容以及一些准动态内容又是最耗费带宽的，特别是针对全国甚至全世界的大型网站，如果这些请求都指向主站的服务器的话，不仅是主站服务器受不了，单端口500M左右的带宽也扛不住，所以大多数网站都需要CDN服务。
根本上的原因是，访问速度对互联网应用的用户体验、口碑、甚至说直接的营收都有巨大的影响，任何的企业都渴望自己站点有更快的访问速度。而HTTP传输时延对web的访问速度的影响很大，在绝大多数情况下是起决定性作用的，这是由TCP/IP协议的一些特点决定的。物理层上的原因是光速有限、信道有限，协议上的原因有丢包、慢启动、拥塞控制等。这就是开发者使用CDN的第一个也是最重要的原因：为了加速网站的访问。
除了加速网站的访问之外，CDN还有一些作用：
- 为了实现跨运营商、跨地域的全网覆盖
互联不互通、区域ISP地域局限、出口带宽受限制等种种因素都造成了网站的区域性无法访问。CDN加速可以覆盖全球的线路，通过和运营商合作，部署IDC资源，在全国骨干节点商，合理部署CDN边缘分发存储节点，充分利用带宽资源，平衡源站流量。阿里云在国内有500+节点，海外300+节点，覆盖主流国家和地区不是问题，可以确保CDN服务的稳定和快速。
- 为了保障开发者的网站安全
CDN的负载均衡和分布式存储技术，可以加强网站的可靠性，相当于无形中给开发者网站添加了一把保护伞，应对绝大部分的互联网攻击事件。防攻击系统也能避免网站遭到恶意攻击。
- 为了异地备援
当某个服务器发生意外故障时，系统将会调用其他临近的健康服务器节点进行服务，进而提供接近100%的可靠性，这就让开发者网站可以做到永不宕机。
- 为了节约成本
投入使用CDN加速可以实现网站的全国铺设，你根据不用考虑购买服务器与后续的托管运维，服务器之间镜像同步，也不用为了管理维护技术人员而烦恼，节省了人力、精力和财力。
- 为了让开发者更专注业务本身
CDN加速厂商一般都会提供一站式服务，业务不仅限于CDN，还有配套的云存储、大数据服务、视频云服务等，而且一般会提供7x24运维监控支持，保证网络随时畅通，你可以放心使用。并且将更多的精力投入到发展自身的核心业务之上。
使用CDN链接如何能精准的访问到本地的服务器，这里又涉及到DNS（domain network system）域名解析系统的知识，本文不做过多介绍，感兴趣的可研究👉DNS解析与CDN原理
CDN适用场景
- 网站站点/应用加速：静态内容加速，如：html、image、js、css等
- 视音频点播/大文件下载分发加速：基本上都是视频点播，MP4、flv等视频文件，如：爱优腾视频播放软件。
- 视频直播加速：视频直播加速，流媒体切片、转码、码流转换等等。如：斗鱼、淘宝直播
- 移动应用加速：移动APP更新文件（apk文件）分发，移动APP内图片、页面、短视频、UGC等内容的优化加速分发。
区别
简单了解了以上两种资源访问方式后，让我们回到最初的问题并给出答案：
Q：CDN引入资源包和NPM引入资源包有什么区别？
A：从使用和打包两个方面来看
【使用时】
- NPM是安装第三方包到本地使用
- CDN是通过链接访问，让用户的访问从距离他们最近的站点去获取到这些资源，缩短传输的距离，达到一个轻量、轻快的体验效果，当然网络不好的时候，资源请求会挂掉。
【打包时】
- 会把NPM依赖的包打到本项目中，占用包的体积
- CDN通过链接访问，不打到本地，能减少一些包带来巨大的体积
举个简单的例子：就像在项目中使用一张图片，NPM是把图片放在本地，CDN通过链接去访问图片
Q：为什么用户量较大的高德地图在官网示例中要通过CDN的方式给出demo，而不是NPM的方式给出demo？
A：正因为用户群体大，访问量大，所以才要分散中心服务器的压力，才推荐用户使用CDN的方式访问获取更好的体验。
回答了这两个问题后，又联想到了第三个问题：使用CDN访问库真的比NPM安装包要好吗？为什么不全部使用CDN？
这两者的使用还是要具体情况具体分析：如果只是按需引入了很少的依赖包也是没有必要用CDN引入的，因为根本问题是依赖包太大才需要用CDN的高带宽去解决。使用NPM安装第三方包，打包项目时会把相应的文件打包到本项目中，理论上使用本地文件肯定比从网络上去请求一个文件要更快一些。如果没有多少资源文件的话，强行并发下载，会产生多线程小文件的I/O瓶颈。
结论
开发过程中，要根据实际情况有选择的使用两种资源的引入方式，既能使用NPM按需引入的优势，又可以享受CDN的优势。
