核心思路是减少HTTP请求数量与缩小单次请求体积以加快页面加载；通过代码压缩（HTML/CSS/JS）和资源合并（CSS/JS/图片/字体），配合Gzip/Brotli传输压缩，显著提升性能。
核心思路很直接：减少HTTP请求数量 + 缩小单次请求体积 = 加快页面加载。代码压缩与资源合并是其中最有效、最可控的两个抓手。
压缩HTML、CSS、JS，先砍掉“看不见的字”
HTML里大量空格、换行、注释对人友好，但浏览器不需要；CSS和JS里的缩进、长变量名、注释也一样。这些内容不参与渲染，却占带宽。
- 用 html-minifier 处理HTML，能自动移除空白符、注释、冗余属性（比如
type="text/css"） - CSS推荐 CSSNano，它不仅能删空格，还能合并重复规则、删除无效声明
- JS建议用 Terser（UglifyJS的现代替代），支持ES6+，压缩同时做变量重命名和控制流扁平化
- 别忘了开启服务器端Gzip或Brotli压缩——这是传输层的二次瘦身，通常能再减60%~80%体积
合并同类资源，把“多次敲门”变成“一次开门”
每个HTTP请求都有TCP握手、TLS协商、首字节时间等固定开销。哪怕每个JS只有2KB，10个请求也远慢于合并成一个20KB文件。
- CSS文件合并：把
header.css、main.css、footer.css打包成all.css，用<link rel="stylesheet" href="all.css">引入 - JS文件合并：将工具类、业务逻辑、第三方库（如lodash）按执行依赖顺序拼接，避免运行时报错
- 注意首屏阻塞问题：非关键JS（如统计、分享按钮）不要合并进主入口，改用
async或defer单独加载 - 构建工具如Webpack默认就支持合并，只需配置
entry为多入口、output.filename设为统一名称
图片和字体也得“合”与“压”
图片常占页面总大小70%以上，字体文件动辄几百KB，它们同样是HTTP请求大户。
立即学习“前端免费学习笔记（深入）”；
- 小图标用CSS Sprites：把十几个16×16px图标合成一张图，用
background-position定位显示，1张图代替10次请求 - 中等尺寸图片转WebP格式，配合
srcset提供2x/1x版本，让设备按需下载 - 极小图标（background: url("data:image/svg+xml;base64,PHN2Zy...")
- 字体文件只包含实际用到的字符集（子集化），并预加载关键字体：
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
缓存策略配合同步更新，让合并更安全
合并后文件变大，一旦出错会影响整个功能模块；同时，用户可能长期缓存旧文件。必须靠缓存机制兜底。
- 静态资源加哈希指纹，比如
app.a1b2c3.js，内容一变文件名就变，浏览器自然弃旧用新 - 响应头设置
Cache-Control: public, max-age=31536000（1年），让CDN和浏览器强缓存 - HTML本身缓存时间要短（如
max-age=60），确保能及时拉到带新资源链接的最新页面 - CDN节点分发合并后的资源，用户就近获取，进一步降低RTT延迟
