CDN · 要努力

## CDN CDN (Content Delivery Network) 内容分发网络，将数据缓存在离用户最近的地方，使用户以最快的速度获取，并减少源站负载压力的目的； CDN作为一种基础的云服务，同样具有资源托管、按需扩展（能够应对流量高峰）； ### CDN原理用户输入域名 --> DNS服务器 --> CDN专用DNS服务器 --> CDN负载均衡设备 --> CDN缓存服务器 >- 用户在浏览器中输入要访问的域名。 >- 浏览器向DNS服务器请求对域名进行解析。由于CDN对域名解析进行了调整，DNS服务器会最终将域名的解析权交给CNAME指向的CDN专用DNS服务器。 >- CDN的DNS服务器将CDN的负载均衡设备IP地址返回给用户。 >- 用户向CDN的负载均衡设备发起内容URL访问请求。 >- CDN负载均衡设备会为用户选择一台合适的缓存服务器提供服务。 > 综合分析后负载均衡设置会把缓存服务器的IP地址返回给用户。依据包括： > * 根据用户IP地址，判断哪一台服务器距离用户最近； > * 根据用户所请求的URL中携带的内容名称，判断哪一台服务器上有用户所需内容； > * 查询各个服务器的负载情况，判断哪一台服务器的负载较小。 >- 用户向缓存服务器发出请求。 >- 缓存服务器响应用户请求，将用户所需内容传送到用户。 > 如果这台缓存服务器上并没有用户想要的内容，而负载均衡设备依然将它分配给了用户，那么这台服务器就要向它的上一级缓存服务器请求内容，直至追溯到网站的源服务器将内容拉取到本地。 > ### CDN的**使用场景** >- 使用第三方的CDN服务：如果想要开源一些项目，可以使用第三方的CDN服务； > >- 使用CDN进行静态资源的缓存：将自己网站的静态资源放在CDN上，比如js、css、图片等。可以将整个项目放在CDN上，完成一键部署。 > >- 直播传送：直播本质上是使用流媒体进行传送，CDN也是支持流媒体传送的，所以直播完全可以使用CDN来提高访问速度。CDN在处理流媒体的时候与处理普通静态文件有所不同，普通文件如果在边缘节点没有找到的话，就会去上一层接着寻找，但是流媒体本身数据量就非常大，如果使用回源的方式，必然会带来性能问题，所以流媒体一般采用的都是主动推送的方式来进行。 ### Vue项目实现CDN加速 - index.html 文件 ```js <body> <div id="app"></div>  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/vue-router@3.0.1/dist/vue-router.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/vuex@3.0.1/dist/vuex.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/axios@0.18.0/dist/axios.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/element-ui@2.14.1/lib/index.js"></script> </body> ``` - 把项目中有在CDN加速的插件，不用 import … from … 这样去引入了，直接换成 const … = require("…") 这样去引用。 - webpack.base.conf.js文件，外部引用，不需要打包进去 ```js externals: { 'vue': 'Vue', 'vue-router': 'VueRouter', 'vuex': 'Vuex', 'axios': 'axios', 'element-ui': 'Element', }, ```