3.CND了解

Question：虽然前端流程话构建，对代码进行了编译、压缩减少了网络传输的大小，但实际影响用户体验的还是网站首次load时的等待，一旦资源过多或者过大，都加大了网络传输过程的耗时。

CND(内容分发网络)：加速网络传输，通过将资源部署到世界各地，使用户访问时按照就近原则，从最近的服务器获取资源，来加快资源的访问速度。

CND其实是通过优化物理链路层传输过程的光速有限、丢包等问题来提升网速的。

接入CND

传统demo:

传统demo截图

传统项目中，所有的资源都是在同一个server上，访问都是通过相对路径来实现的，当将这些资源放到同一个CDN Server上，也能正常使用。

Question：CDN服务一般都会为资源开启很长时间的缓存，若有人从CDN Server上访问了一个index.html以后，即使之后的发布操作rewrite了以后，用户很长一段时间都会获得old index.html，导致发布跟新操作不能及时生效。

Solution：

* 针对HTML文件：不开启缓存，将html放到自己的Server上，同时关闭Server的缓存；自己的Server只提供html文件和数据接口。

* 针对静态的javascript、css、图片等文件：开启CND和缓存，上传到CDN Server上，同时为每个文件名带上文件内容算出的Hash值，避免文件更细带来的缓存烦恼

更新Demo：

CDN更新Demo

Good：如上图可以看到CND的url中省略了http:或者https:前缀，这样的好处是：在访问CDN资源是会根据当前html的访问方式http或者https来访问CDN资源。

Question：我们知道浏览器有个规则，同一时刻针对同一域名下的资源的并行请求有限制的（大约4个左右，不用浏览器限制不同），如果所有的资源都放在同一个CDN Server的域名下，就会导致资源的加载阻塞和排队，增加load时长。

Solution：可以将不同的资源放在不同的CND域名下，提升加载速度。

更改如下：

子域名cdn更改

Good：减少域名解析时间，可以增加dns-prefetch在meta中。

构建要实现以下几点：

1. 静态资源的导入URL需要变成指向CDN服务的绝对路径

2. 静态资源的文件名要带上根据内容计算的hash值，防止缓存

3. 不用资源放到不同域名的CDN服务上，防止资源加载阻塞

webpack的cdn接入配置