合并网络请求是最直接有效的减少HTTP开销方式，通过打包JS/CSS文件、CSS Sprites合并小图、内联关键小资源等手段降低连接建立次数，配合代码分割优化包体积。
合并 JS 和 CSS 文件
把多个 .js 或 .css 文件打包成一个文件，是最常用也最易见效的手段。
- 原始状态：
<script src="a.js"></script>、<script src="b.js"></script>、<script src="c.js"></script>→ 3 次请求 - 合并后：
<script src="bundle.js"></script>→ 1 次请求 - 构建工具如 Webpack 默认启用
splitChunks，可自动提取公共模块；Vite 则通过原生 ESM 按需加载，兼顾合并与拆分的平衡 - 注意控制单个包体积，超过 200KB 可能拖慢首屏，建议配合代码分割（
import()动态导入）做细粒度管理
用 CSS Sprites 合并小图资源
针对图标、按钮背景等尺寸固定的小图，把它们拼进一张大图，再用 background-position 定位显示对应区域。
- 10 个 2KB 的 PNG 图标 → 原本 10 次请求 + 10 次连接开销
- 合并为 1 张 15KB 的 sprites.png → 仅 1 次请求
- 适合静态、不频繁更新的图标集；现代项目中常被字体图标（iconfont）或 SVG Sprite 替代，但原理一致
- 可用
webpack-spritesmith或在线工具自动生成 CSS 和雪碧图
内联关键小资源
对极小且首屏必需的脚本或样式（比如 <script> 或 <style> 标签里。
- 绕过 HTTP 请求全过程，零延迟执行或应用
- 适用于渲染阻塞类资源，例如设置主题色、防 FOUC 的最小样式、轻量级交互钩子
- 避免内联过大内容，否则会增加 HTML 体积，影响 HTML 解析速度和 gzip 效率
- 构建时可用插件如
html-webpack-plugin的inline配置自动注入
服务端动态合并（可选补充）
在没有构建流程的老系统中，可通过服务端脚本统一入口合并资源，例如：
立即学习“Java免费学习笔记（深入）”；
- PHP 路由如
/combine?files=a.js,b.js,c.js，读取并拼接返回 - Nginx 配置
sub_filter或使用ngx_http_concat_module实现类似功能 - 注意添加正确 MIME 类型、缓存头（
Cache-Control）、ETag 和 Gzip 压缩，否则得不偿失
