使用cdn引入库是不是真的比npm引入的好？

Question

之前听人说过把要使用的库使用cdn引入项目可以减小项目的体积，从而可以优化首屏渲染，也听人说过这个没用，你使用cdn，最终在客户端还是要加载库，对客户端而言只是加载时调的服务器不一样而已。我就想请问以下几个问题

1. 使用cdn引入库是不是真的比npm引入的好？
2. 好在哪里?用哪种方式，最终在浏览器都要加载，是不是浏览器使用cdn加载比你从项目加载快
3. 有一个东西叫Tree Shaking的，比如说lodash，如果你用cdn，那么要加载全部，那么如果你npm lodash-es，浏览器下载的体积反而要小很多，这种情况是不是npm比cdn要好

Answer 1

用不用 CDN 和是不是 npm 引入，完全是两个维度的问题，并不冲突。

但这里题主想问的应该是“使用第三方的 CDN 链接以 <script> 方式引入” 和 “使用 npm 安装并使用 webpack 之类的工具打包” 孰优孰劣的问题。

具体情况具体分析，不能一概而论，要考虑以下这么几个问题：

• 你自己的 Web 站点带宽有多大？有没有做全国甚至全球多地部署（不同地区用户访问就近加载）？如果没有，那么 CDN 的优势就在于此。
• 你页面上有多少个外链资源文件（JS / CSS / IMG 等等）？浏览器会限制同域资源并发请求数（一般是 10），引入 CDN 跟你自己的 Web 站点域名不同，就可以打破浏览器的并发限制，从而提高整体的下载速度。但如果你一共也没多少个资源文件，强行拆成多个域名企图并发下载，反而会产生多线程小文件 I/O 瓶颈。
• 按需引入问题。确实存在只使用了依赖包很少一部分功能、但依赖包本体很大的问题。但你按需引入的体积带来减少的优势真的很明显吗？如果只是少个几十 KB 其实压根不叫优化。

---

终极解决方案：你可以把自己的 Web 站点整站都 CDN 化啊，即能享受到 npm 按需引入的优势，又能拥有前面 1、2 两点的优势。

Answer 2

按道理来说的话 肯定是文件越少越快 可以减少request数量
不过要考虑带宽的因素
cdn一般带宽很高，下载的快
所以还是要看自己的配置
如果是个1M带宽的服务器 那分不分文件都慢