性能优化--CDN

fuzuxian 10/15/2020 性能

# 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 文件

<body>
  <div id="app"></div>
  <!-- built files will be auto injected -->
  <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>

1
2
3
4
5
6
7
8
9

把项目中有在CDN加速的插件，不用 import … from … 这样去引入了，直接换成 const … = require("…") 这样去引用。
webpack.base.conf.js文件，外部引用，不需要打包进去

 externals: {
    'vue': 'Vue',
    'vue-router': 'VueRouter',
    'vuex': 'Vuex',
    'axios': 'axios',
    'element-ui': 'Element',
  },

1
2
3
4
5
6
7