CDN 缓存与回源

摘抄自前端基础知识——CDN 篇 (opens new window)

CDN 是什么

CDN（Content delivery networks，内容分发网络），指的是一组分布在各个地区的服务器。这些服务器存储着数据的副本，因此服务器可以根据哪些服务器与用户距离最近，来满足数据的请求。 CDNs 提供快速服务，较少受高流量影响。

CDNs 被广泛用于传输 stylesheets 和 JavaScript 等静态资源，像 Bootstrap，Jquery 等。对这些库文件使用 CDN 技术，有以下几点好处：

• 通过 CDN 向用户分发传输相关库的静态资源文件，可以降低我们自身服务器的请求压力。
• 大多数 CDN 在全球都有服务器，所以 CDNs 上的服务器在地理位置上可能比你自己的服务器更接近你的用户。 地理距离会按比例影响延迟。
• CDNs 已经配置了恰当的缓存设置。使用 CDN 节省了在你的服务器中对静态资源文件的配置。

CDN 的两个核心功能

• 缓存。就是说把资源 copy 一份到 CDN 服务器上的过程。
• 回源。指 CDN 发现自己没有这个资源（一般是缓存的数据过期了），转而向根服务器（或者它的上层服务器）去请求这个资源的过程。

CDN 与前端性能优化

静态资源本身具有访问频率高、承接流量大的特点，因此静态资源加载速度始终是前端性能的一个非常关键的指标。根据 CDN 的特点，可以利用 CDN 缓存静态资源，优化静态资源的请求响应速度和网络缓存。
在实际开发中的一般方案为：

1. 单独搭建一个静态资源服务作为 CDN 源站，在源站下划分一个路由例如 /static，LB 层将主站域名 /static 路由解析到静态资源服务即 CDN 源站上，CDN 配置成只有 /static 路由下的资源指向源站回源。
2. 在 Webpack 生产构建配置中为所有资源文件中加上 hash，并设置 publicPath 为 //cdn.example.com/static/path/to/dist。
3. 在构建流水线中于 Webpack 构建完成后加一步增量上传产物文件夹下的内容到静态资源服务源站上的步骤，并将 html 文件存起来记上版本号。
4. 主站用 Nginx / Apache 等静态资源服务器或者用 Node.js 写个简单的服务在对应的访问路由返回步骤 3 中构建产物的 html 文件。
5. 主站对 html 配置无缓存（某些情况下也可以加上协商缓存），CDN 则可以把缓存时间设置的尽可能的长。

参考大公司 CDN 怎么优雅接入前端工程？ - 月迷津渡的回答 - 知乎 (opens new window)

将静态资源部署在 CDN 域名上，请求静态资源时也可以避免传递不必要的 Cookie。