什么是CDN?

CDN（内容分发网络）：

  • 它是指通过相互连接的网络系统，利用最靠近每个用户的服务器；
  • 更快、更可靠地将音乐、图片、视频、应用程序及其他文件发送给用户；
  • 来提供高性能、可扩展性及低成本的网络内容传递给用户；

上边的概念怎么理解呢？
其实cnd依赖于部署在各地的很多服务器。这些服务器的关系分为三级。源节点->父节点->边缘节点。
一个源节点连接着多个父节点，而每个父节点又连接着多个边缘节点。边缘节点之间又是连接在一起的。这种服务器连接在一起形成的网络系统就是cdn。

image-20220531172929753.png

所有的文件都是保存在源节点的。比如当用户请求一张图片资源时，就会到最近的边缘节点去请求下载。边缘节点就再去其父节点请求，父节点再向源节点请求。这样用户就可以在边缘节点拿到想要下载的图片了。
而且，资源是保存在缓存的。其实我们并不用每次都得层层向上地从边缘节点到源节点请求资源。比如说同一个地方的A与B，A按照上边说的层层向上请求了一张图片资源。而B也向同一个边缘节点请求这张图片，直接就可以在边缘节点的缓存里拿到图片资源了。（如果边缘节点缓存没有，就去父节点的缓存里拿，父节点也没有就最后再去源节点拿资源）
这样的内容分发网络系统，大大提高了用户的资源请求速度。提高了性能。

在真实开发中，我们怎样利用CDN来提高性能呢？有两种方式：
方式一：我们项目里打包的所有静态资源，放到CDN服务器，用户所有资源都是通过CDN服务器加载的；（缺点就是需要花钱购买CND服务器）
方式二：一些第三方资源放到CDN服务器上，而其他的属于项目业务的静态资源，就还是部署在自己的服务器上。(虽然只有第三方资源在CDN服务器上，但是这样也能提升很大，最重要的是直接白嫖谁不爱呢，这也是最常见的方式)

方式一：全部资源部署到CDN服务器

首先就是要花钱去阿里、腾讯、亚马逊、Google等购买CDN服务器；（啥？要花钱？告辞！）
然后我们就使用webpack帮我们把打包出来的资源，在原本的路径前加上CDN服务器地址。
配置publicPath，webpack就会自动给我们的资源路径前添加cdn地址了。

  1. //webpack.config.js  
  2. output: {  
  3.   filename: "bundle.js",  
  4.   path: path.resolve(__dirname, "./build"),  
  5.   publicPath: "cnd服务器地址"  
  6. },

方式二：第三方库使用CDN外链引入

通常一些出名的第三方库其实会将打包后的源码放到一些比较出名的、免费 的CDN服务器上：
（国际上使用比较多的是unpkg、JSDelivr、cdnjs； 国内也有一个比较好用的CDN是bootcdn）
所以我们可以使用CDN外链的方式引入第三方库。

  1. //webpack.config.js  
  2. externals: {  
  3.   lodash: "_",  
  4.   dayjs: "dayjs"  
  5. },  
  7. //index.html  
  8. <!-- ejs模板语法 ：实现只在生产环境执行-->  
  9. <% if (process.env.NODE_ENV === 'production') { %>   
  10. <script src="https://unpkg.com/dayjs@1.8.21/dayjs.min.js"></script>  
  11. <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>  
  12. <% } %>