多域名资源部署

问题

为什么利用多个域名来存储网站资源会更有效？

解答

1. 突破浏览器并发限制

浏览器对同一域名的并发连接数有限制，通常为 6-8 个。使用多个域名可以增加并行下载数量。

<!-- 单域名：最多 6 个并发 -->
<link rel="stylesheet" href="https://example.com/css/main.css">
<link rel="stylesheet" href="https://example.com/css/vendor.css">
<script src="https://example.com/js/app.js"></script>
<img src="https://example.com/images/logo.png">
<!-- ... 超过 6 个就要排队 -->

<!-- 多域名：并发数翻倍 -->
<link rel="stylesheet" href="https://css.example.com/main.css">
<script src="https://js.example.com/app.js"></script>
<img src="https://img.example.com/logo.png">
<video src="https://media.example.com/intro.mp4"></video>

2. 减少 Cookie 开销

主域名的请求会自动携带 Cookie，静态资源不需要这些数据。

// 主域名请求头（携带 Cookie）
// GET https://example.com/api/user
// Cookie: session=abc123; token=xyz789; preferences=...
// 每个请求额外增加几百字节

// 静态资源域名（无 Cookie）
// GET https://static.example.com/js/app.js
// 无 Cookie 头，请求更小更快

配置独立的静态资源域名：

# nginx 配置 - 静态资源域名
server {
    server_name static.example.com;
    
    location / {
        root /var/www/static;
        # 设置长缓存
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
}

3. CDN 分发优化

不同域名可以指向不同的 CDN 服务商或节点：

// 资源分配策略
const CDN_CONFIG = {
  images: 'https://img-cdn.example.com',    // 图片 CDN（优化图片压缩）
  scripts: 'https://js-cdn.example.com',    // JS CDN（支持 HTTP/2 推送）
  videos: 'https://video-cdn.example.com',  // 视频 CDN（支持流媒体）
};

function getAssetUrl(type, path) {
  return `${CDN_CONFIG[type]}${path}`;
}

// 使用
getAssetUrl('images', '/logo.png');  // https://img-cdn.example.com/logo.png

4. 安全隔离

用户上传内容使用独立域名，防止 XSS 攻击：

// 用户上传内容放在独立域名
const USER_CONTENT_DOMAIN = 'https://user-content.example.com';

// 即使用户上传了恶意脚本，也无法访问主域名的 Cookie
// 因为受同源策略限制

5. 实际部署示例

// webpack 配置多 CDN
module.exports = {
  output: {
    // 根据文件类型使用不同 CDN
    publicPath: 'https://cdn.example.com/',
  },
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/,
        type: 'asset',
        generator: {
          publicPath: 'https://img.example.com/',
        },
      },
    ],
  },
};

关键点

• 并发限制：浏览器对单域名限制 6-8 个并发连接，多域名可突破限制
• Cookie 减负：静态资源域名不携带 Cookie，减少请求体积
• CDN 就近访问：不同域名可配置不同 CDN，优化访问速度
• 安全隔离：用户内容独立域名，防止 XSS 攻击主站
• HTTP/2 影响：HTTP/2 支持多路复用，多域名的优势有所减弱，但 Cookie 隔离仍有价值