Webpack 通过插件链路实现图片压缩与字体子集化：图片构建时转 WebP/AVIF、小图内联、懒加载；字体采用 font-display: swap、子集提取、动态加载；配合代码分割、长期缓存与压缩传输，确保首屏仅加载可见内容所需最小资源。
Webpack 本身不直接处理图片压缩或字体子集化，但可以通过插件和配置链路协同实现——核心思路是：让图片在构建时转为更小格式并内联/懒加载，让字体只加载当前页面需要的字形，同时避免阻塞首屏渲染。
图片压缩：构建时转 WebP/AVIF + 按需加载
不要等运行时再处理图片。在 Webpack 构建阶段就完成格式转换和尺寸优化：
- 用 image-minimizer-webpack-plugin 配合 cwebp、avifenc 等二进制工具，在打包时自动将 JPG/PNG 转为 WebP 或 AVIF（体积通常减少 30%–50%）
- 对小于 10 KB 的图标类图片，配置 url-loader 或 asset-module（Webpack 5+）设为
type: 'asset-inline'，转为 base64 内联，省去一次 HTTP 请求 - 首屏外图片统一用
loading="lazy"属性；若需兼容旧浏览器或自定义逻辑，用 IntersectionObserver 监听视口，动态设置src或srcset
字体资源：font-display + 子集化 + 异步加载
中文字体文件动辄 2–5 MB，全量加载会严重拖慢首屏。关键不是“压缩字体”，而是“只加载要显示的字”：
- CSS 中声明
font-display: swap，确保文本立即显示（用系统字体降级），字体加载完成后再替换，避免空白闪烁 - 使用 fontmin 或 glyphhanger 提取当前 HTML/CSS 中实际用到的汉字，生成精简子集（例如仅含“登录、首页、搜索”等 200 字），体积可从 4 MB 降到 100 KB 以内
- 避免在
<head>中同步引入字体 CSS。改用 JS 动态加载：const fontLink = document.createElement('link'); fontLink.rel = 'stylesheet'; fontLink.href = '/fonts/subset.css'; document.head.appendChild(fontLink);，可结合用户行为（如进入某页、点击按钮）触发
配合 Webpack 分离与缓存策略
即使图片和字体已优化，若打包进主 chunk，仍会影响首屏 JS 解析。需进一步隔离：
立即学习“Java免费学习笔记（深入）”；
- 把所有字体文件、图标字体、WebP 图片资源单独归入
assets类型 chunk，通过splitChunks.cacheGroups配置提取，利用浏览器长期缓存 - 启用 compression-webpack-plugin 输出
.gz和.br文件，配合 Nginx 开启 Brotli/Gzip，传输体积再降 70%+ - 对静态资源加哈希（
[contenthash]），确保更新后能精准失效旧缓存，避免用户卡在旧字体/图片版本
不复杂但容易忽略：图片和字体的优化效果，必须搭配代码分割和懒加载才能真正兑现到首屏。单压一张图没用，关键在于整条链路是否让首屏只加载“此刻可见内容所需”的最小资源集。
