如何联合优化图片、字体、代码分割与构建产物？

# 核心结论

图片、字体、脚本和构建产物不能只用“压缩后总大小”统一衡量。优化目标是让当前页面尽早获得并呈现必要资源，减少无关下载、解析、编译和执行，同时保持长期缓存稳定。图片应匹配实际显示尺寸和编码格式；字体应限制字形、字重并控制替换行为；代码应按业务边界分割并消除重复依赖；构建分析提供线索，最终效果必须由网络瀑布、主线程耗时和真实用户指标验证。

# 底层机制

响应式图片可通过 srcset 与 sizes 告知浏览器不同宽度候选及预期布局尺寸，使其结合设备像素比、视口和资源选择算法下载合适版本。仅降低压缩质量而保留远超展示尺寸的像素，通常收益有限。使用 width、height 或 `aspect-