JS CDN 优化：边缘缓存、请求合并与预连接

各位观众老爷们，晚上好！我是今天的主讲人，咱们今天聊聊JS CDN的优化，让你的网站飞起来！

咱们程序员嘛，最怕啥？怕慢！网站慢一秒，用户流失一大把，老板脸色黑成锅底。所以，优化是王道，尤其是JS CDN优化，搞好了事半功倍。今天咱们就来扒一扒JS CDN优化的那些事儿，重点讲讲边缘缓存、请求合并和预连接。

一、CDN 的基本概念：为啥要用 CDN？

先来简单回顾一下CDN（Content Delivery Network，内容分发网络）。你可以把它想象成一个快递网络，只不过运送的是你的网站内容，比如JS文件、CSS文件、图片等等。

传统的用户访问网站，直接从你的服务器拿东西。如果服务器离用户很远，或者服务器很忙，那速度就慢成蜗牛了。

CDN 就不一样了，它在全球各地都有节点（服务器），用户访问的时候，CDN 会选择离用户最近的节点，把内容从那里送过去。这样就大大缩短了传输距离，提高了访问速度。

用 CDN 的好处：

• 速度快： 离用户近，传输速度快。
• 稳定： CDN 有冗余机制，一个节点挂了，会自动切换到其他节点。
• 减轻服务器压力： CDN 分担了服务器的流量压力。
• 安全： CDN 可以防御一些常见的网络攻击。

二、边缘缓存：让缓存离用户更近

边缘缓存是 CDN 的核心技术之一。简单来说，就是把你的网站内容缓存到 CDN 的边缘节点上，这些节点离用户最近。

当用户访问你的网站时，CDN 会先检查边缘节点上有没有缓存的资源。如果有，直接从边缘节点返回，速度飞快！如果没有，才去源服务器拿，然后再缓存到边缘节点。

2.1 缓存策略：告诉 CDN 缓存什么，缓存多久

缓存不是随便缓存的，得告诉 CDN 缓存什么，缓存多久。这就要用到缓存策略了。

常见的缓存策略：

• Cache-Control： HTTP 头部字段，用来控制缓存行为。
  • public：允许 CDN 和浏览器缓存。
  • private：只允许浏览器缓存，CDN 不缓存。
  • max-age=seconds：缓存有效期，单位是秒。
  • no-cache：每次都向服务器验证缓存是否有效。
  • no-store：禁止缓存。
• Expires： HTTP 头部字段，指定缓存过期时间。
• ETag/Last-Modified： HTTP 头部字段，用来验证缓存是否有效。

例子：

HTTP/1.1 200 OK
Content-Type: application/javascript
Cache-Control: public, max-age=3600  // 缓存 1 小时
Expires: Thu, 01 Dec 2023 10:00:00 GMT
ETag: "63745234-1a2b"

2.2 版本控制：防止缓存污染

当你的 JS 文件更新了，但用户访问的还是旧版本，那就麻烦了。为了防止这种情况，需要进行版本控制。

常见的版本控制方法：

• 文件名加 hash： 每次更新 JS 文件，都生成一个新的文件名，文件名包含 hash 值。
  • 例如：main.js -> main.1a2b3c4d.js
• URL 参数： 在 URL 后面加上一个版本号参数。
  • 例如：main.js?v=1.0

例子：

HTML 代码：

<script src="https://cdn.example.com/js/main.1a2b3c4d.js"></script>

或者：

<script src="https://cdn.example.com/js/main.js?v=1.0"></script>

2.3 CDN 配置：设置缓存策略

不同的 CDN 提供商，配置缓存策略的方式可能不一样。一般来说，可以在 CDN 的控制面板中设置缓存策略。

常见的配置项：

• 缓存时间（TTL）： 设置缓存的有效期。
• 忽略查询字符串： 是否忽略 URL 中的查询字符串。
• 强制缓存： 强制 CDN 缓存某些资源。

三、请求合并：减少 HTTP 请求

浏览器每次请求一个资源，都需要建立一个 HTTP 连接。如果你的网站有很多小的 JS 文件，那就会产生大量的 HTTP 请求，影响性能。

请求合并就是把多个 JS 文件合并成一个，减少 HTTP 请求的数量。

3.1 如何合并 JS 文件？

• 手动合并： 把多个 JS 文件的内容复制到一个文件中。
• 构建工具： 使用构建工具（如 Webpack、Rollup、Parcel）自动合并 JS 文件。

例子：

假设你有三个 JS 文件：a.js、b.js、c.js。

a.js:

console.log('a.js');

b.js:

console.log('b.js');

c.js:

console.log('c.js');

合并后的文件 bundle.js:

console.log('a.js');
console.log('b.js');
console.log('c.js');

HTML 代码：

<script src="https://cdn.example.com/js/bundle.js"></script>

3.2 Webpack 代码分割 (Code Splitting)：更智能的合并

仅仅简单合并所有 JS 文件有时并不理想。用户可能只需要用到网站的一部分功能，没必要一次性加载所有 JS 代码。这时就可以使用 Webpack 的代码分割功能，把 JS 代码分割成多个小的 chunk，按需加载。

例子：

Webpack 配置 (webpack.config.js):

module.exports = {
  entry: './src/index.js',
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  optimization: {
    splitChunks: {
      chunks: 'all',
    },
  },
};

这个配置会把你的代码分割成多个 chunk，包括：

• main.bundle.js: 入口文件。
• vendors~main.bundle.js: 第三方库。
• runtime~main.bundle.js: Webpack 的运行时代码。

HTML 代码：

<script src="https://cdn.example.com/js/runtime~main.bundle.js"></script>
<script src="https://cdn.example.com/js/vendors~main.bundle.js"></script>
<script src="https://cdn.example.com/js/main.bundle.js"></script>

3.3 Tree Shaking：移除无用代码

Tree Shaking 是一种移除 JavaScript 代码中未引用代码的技术。它可以减小 JS 文件的大小，提高加载速度。

Webpack 和 Rollup 都支持 Tree Shaking。

例子：

假设你有这样一个模块 utils.js:

export function add(a, b) {
  return a + b;
}

export function subtract(a, b) {
  return a - b;
}

你的入口文件 index.js 只使用了 add 函数：

import { add } from './utils.js';

console.log(add(1, 2));

经过 Tree Shaking，subtract 函数会被移除，最终生成的 JS 文件只包含 add 函数。

四、预连接 (Preconnect)：提前建立连接

浏览器在请求资源之前，需要先建立连接，包括 DNS 解析、TCP 握手、TLS 协商等。这些过程都需要时间。

预连接就是提前建立连接，让浏览器在真正需要请求资源的时候，可以直接使用已经建立好的连接，减少延迟。

4.1 <link rel="preconnect">：预连接到服务器

使用 <link rel="preconnect"> 标签可以预连接到服务器。

<link rel="preconnect" href="https://cdn.example.com">

这个标签告诉浏览器，你需要连接到 https://cdn.example.com 这个服务器，浏览器会提前进行 DNS 解析、TCP 握手、TLS 协商。

4.2 <link rel="dns-prefetch">：预解析 DNS

<link rel="dns-prefetch"> 标签只进行 DNS 预解析，不建立 TCP 连接。

<link rel="dns-prefetch" href="//cdn.example.com">

4.3 什么时候使用预连接？

• 连接是瓶颈： 如果连接时间占用了大量时间，可以考虑使用预连接。
• 你知道要连接的服务器： 预连接需要知道要连接的服务器的地址。
• 连接是安全的： 预连接最好用于安全的 HTTPS 连接。

4.4 预连接的注意事项

• 不要过度使用： 预连接会消耗资源，不要过度使用。
• 优先使用 HTTP/2： HTTP/2 允许多路复用，可以减少连接数量。
• 监控性能： 使用预连接后，要监控性能，确保它确实带来了提升。

五、 总结：优化 CDN，让网站飞起来！

好啦，今天咱们就聊到这里。总结一下：

• 边缘缓存： 让缓存离用户更近，提高访问速度。
  • 设置合理的缓存策略。
  • 使用版本控制，防止缓存污染。
• 请求合并： 减少 HTTP 请求数量，提高性能。
  • 手动合并 JS 文件。
  • 使用构建工具自动合并 JS 文件。
  • 使用代码分割，按需加载。
  • 使用 Tree Shaking，移除无用代码。
• 预连接： 提前建立连接，减少延迟。
  • 使用 <link rel="preconnect"> 标签预连接到服务器。
  • 使用 <link rel="dns-prefetch"> 标签预解析 DNS。

掌握了这些技巧，你的网站就能飞起来！

最后，给大家留几个思考题：

1. 在什么情况下，不适合使用 CDN？
2. 如何监控 CDN 的性能？
3. 除了上面提到的优化方法，还有哪些可以优化 JS CDN 的方法？

希望今天的分享对大家有所帮助！下次再见！

附录：常用 HTTP 头部字段

头部字段	描述
Cache-Control	控制缓存行为。
Expires	指定缓存过期时间。
ETag	资源的唯一标识符，用于验证缓存是否有效。
Last-Modified	资源的最后修改时间，用于验证缓存是否有效。
Content-Type	资源的 MIME 类型。
Content-Length	资源的大小，单位是字节。
Accept-Encoding	客户端支持的压缩算法。
Content-Encoding	服务器使用的压缩算法。

不同 CDN 厂商的配置方法总结 (仅供参考，具体请查阅官方文档)：

CDN 厂商	缓存配置	请求合并	预连接
Cloudflare	Page Rules, Cache Rules, Browser Cache TTL, Edge Cache TTL	需通过代码构建工具实现，Cloudflare本身不提供请求合并功能。	通过 <link rel="preconnect"> 和 <link rel="dns-prefetch"> 实现，需要在 HTML 中手动添加。
AWS CloudFront	Cache Policies, Origin Request Policies, Behavior settings (TTL)	需通过代码构建工具实现，CloudFront本身不提供请求合并功能。	通过 <link rel="preconnect"> 和 <link rel="dns-prefetch"> 实现，需要在 HTML 中手动添加。
Azure CDN	Caching rules (query string behavior, caching duration), Compression (static compression)	需通过代码构建工具实现，Azure CDN 本身不提供请求合并功能。	通过 <link rel="preconnect"> 和 <link rel="dns-prefetch"> 实现，需要在 HTML 中手动添加。
腾讯云 CDN	缓存配置 (缓存时间, 忽略参数), Range 回源配置	需通过代码构建工具实现，腾讯云 CDN 本身不提供请求合并功能。	通过 <link rel="preconnect"> 和 <link rel="dns-prefetch"> 实现，需要在 HTML 中手动添加。
阿里云 CDN	缓存配置 (缓存时间, 忽略参数), HTTP Header 设置	需通过代码构建工具实现，阿里云 CDN 本身不提供请求合并功能。	通过 <link rel="preconnect"> 和 <link rel="dns-prefetch"> 实现，需要在 HTML 中手动添加。

温馨提示: 实际配置时，请务必查阅对应 CDN 厂商的官方文档，因为各家厂商的功能和配置方式可能会有差异。