资源合并是前端性能优化中降低HTTP请求数最直接有效的方式，核心是将多个JS、CSS、图片等小资源打包为更少文件，减少网络连接次数；通过Webpack合并脚本样式、内联关键资源（≤2KB）、雪碧图或字体图标替代多图请求，并结合HTTP/2与Brotli压缩提升综合收益。
资源合并是前端性能优化中降低HTTP请求数最直接有效的方式，核心思路是把多个小资源（如JS、CSS、图片）打包成更少的文件，从而减少浏览器发起的网络连接次数。
合并JS和CSS文件
将分散的脚本和样式表按逻辑归类后合并，例如：
- 把所有通用工具函数（
utils.js）、业务模块（order.js、user.js）打包为一个app.bundle.js - 把重置样式（
reset.css）、布局（layout.css）、组件（button.css）合并为style.css - 使用Webpack的
entry配置多入口或SplitChunksPlugin智能提取公共代码，避免重复打包
内联关键资源
对首屏强依赖的小体积资源，可直接嵌入HTML，跳过单独请求：
- 将首屏用到的少量CSS（如字体、颜色、布局）通过
<style></style>标签内联 - 将小图标SVG或base64编码的logo图片写入HTML或CSS中，避免额外图片请求
- 注意控制内联内容大小，一般建议单个内联资源不超过2KB，否则可能影响HTML解析速度
使用雪碧图与字体图标
针对大量小图标类图片，合并可显著减少图片请求数：
- 用工具（如
webpack-spritesmith）将icon-home.png、icon-search.png等生成一张雪碧图sprites.png，再通过CSSbackground-position定位显示 - 将图标集合打包为Web字体（如
iconfont.woff2），用一个字体文件替代多个SVG/PNG请求 - 现代项目更推荐使用
<svg></svg>内联或symbol引用方式，兼顾灵活性与请求数控制
启用HTTP/2与资源预加载
打包合并之外，协议层和加载策略也能间接放大合并效果：
- HTTP/2支持多路复用，单个连接并发传输多个资源，此时适度合并（如2–3个JS）比极致合并（1个超大包）更利于缓存复用和增量更新
- 配合
<link rel="preload">提前获取关键合并资源，避免渲染阻塞 - 服务端开启Brotli压缩，让合并后的文件体积增长可控，不抵消请求数减少带来的收益
