Cookie

• HTTP1.0中协议是无状态的，但在WEB应用中，在多个请求之间共享会话是非常必要的，所以出现了Cookie
• cookie是为了辩别用户身份，进行会话跟踪而存储在客户端上的数据

Cookie原理

第一次访问网站的时候，浏览器发出请求，服务器响应请求后，会将cookie放入到响应请求中，在浏览器第二次发请求的时候，会把cookie带过去，服务端会辨别用户身份，当然服务器也可以修改cookie内容。

CDN 缓存

CDN 的全称是 Content Delivery Network，即内容分发网络。CDN服务商将源站的资源缓存到遍布全国的高性能加速节点上，当用户访问相应的业务资源时，用户会被调度至最接近的节点最近的节点ip返回给用户，使内容能够传输的更快，更加稳定。可以提升首次请求的响应能力。

CDN缓存 基本原理

缓存

缓存可以减少网络 IO 消耗，提高访问速度。浏览器缓存是一种操作简单、效果显著的前端性能优化手段。对于这个操作的必要性，Chrome 官方给出的解释似乎更有说服力一些：

1

通过网络获取内容既速度缓慢又开销巨大。较大的响应需要在客户端与服务器之间进行多次往返通信，这会延迟浏览器获得和处理内容的时间，还会增加访问者的流量费用。因此，缓存并重复利用之前获取的资源的能力成为性能优化的一个关键方面。

tree shaking(摇树优化)

• 概念：1 个模块可能有多个方法，只要其中的某个方法使用到了，则整个文件都会被打到bundle 里面去，tree shaking 就是只把用到的方法打入 bundle ，没用到的方法会在uglify 阶段被擦除掉
• 使用：
  • webpack 默认支持，在 .babelrc 里设置 modules: false 即可
  • production mode的情况下默认开启
• 要求：
  • 必须是 ES6 的语法，CJS 的方式不支持
  • 需要tree shaking的模块代码是没有副作用的，否则tree shaking会失效

构建体积优化：动态 Polyfill

Polyfill Service原理

• 每次打开页面，浏览器都会向Polyfill Service发送请求，Polyfill Service识别 User Agent，下发不同的 Polyfill，做到按需加载Polyfill的效果。

  

构建体积优化：如何使用动态 Polyfill service