Webpack优化图片和字体资源的核心是减少体积、控制请求数、按需加载：选WebP/AVIF等现代格式，用image-minimizer-webpack-plugin压缩；字体子集化并转WOFF2，配合preload与lazy load提升感知性能。
Webpack 优化图片和字体资源，核心是减少体积、控制请求数、按需加载。不是简单“塞进去就完事”，而是结合格式选择、压缩策略、加载时机和构建配置来系统处理。
选对图片格式再压缩
不同场景用不同格式，压缩才有意义：
- JPEG/JPG：适合照片类大图，色彩丰富、压缩率高；但边缘细节差，别用在 Logo 或图标上
-
PNG：需要透明背景或清晰线条时用，推荐用
imagemin-pngquant压缩，quality 控制在 65%–80%，平衡清晰度与体积 -
WebP：同质量下比 PNG 小 25%–35%，现代浏览器基本支持；可用
cwebp命令行或imagemin-webp插件批量转
小图转 Base64，大图单独加载
避免大量小图触发 HTTP 请求开销：
- 用
url-loader（Webpack 4）或asset/inline模式（Webpack 5+）设置阈值，比如limit: 8192（8KB）以下自动转 base64 内联 - 超过阈值的图片走
asset/resource模式，输出为独立文件并加哈希命名，利于缓存 - 注意：不要无差别把所有图都 inline，否则 JS 包体积暴涨，首屏解析变慢
构建时自动压缩图片和字体
靠插件在打包阶段完成压缩，不依赖人工预处理：
立即学习“Java免费学习笔记（深入）”；
- 图片压缩：Webpack 5 推荐用
image-minimizer-webpack-plugin，支持 JPEG、PNG、WebP、GIF 多格式，可配置 lossy 或 lossless 模式 - 字体压缩：用
fontmin-webpack或ttf2woff2+file-loader组合，只保留项目实际用到的字符集（如中文字体可 subset） - 字体文件建议只引入 woff2 格式（现代浏览器支持好、压缩率最高），fallback 可配 woff
配合懒加载与预连接提升感知性能
资源再小，不该出现时也不该加载：
- 图片加
loading="lazy"属性，原生支持滚动触达才加载 - 关键字体（如标题字体）用
<link rel="preload">提前获取，避免 FOIT/FOUT - 对 CDN 字体资源，加
<link rel="preconnect" href="https://fonts.googleapis.com">减少 DNS 和 TCP 开销
