加载提速、按需引入、缓存策略、CDN 选型——让 FontAwesome 图标不再拖慢网页
FontAwesome 默认通过加载完整 CSS 和字体文件的方式使用，一个全量包约 300-400 KB。对追求性能的现代前端项目来说，优化空间很大。本文覆盖 6 种从浅到深的优化方案。
仅加载实际使用的 CSS 风格，而非完整的 FontAwesome CSS
<!-- 仅加载 Solid 风格（体积最小） -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/fontawesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/solid.min.css">通过只加载需要的风格 CSS（solid.min.css ≈ 60KB，而 all.min.css ≈ 130KB），可以减少约 50% 的 CSS 体积。
将 FontAwesome 部署到自己的服务器（或对象存储），可以配合以下优化：
<link rel="preload" href="/fonts/fa-solid-900.woff2" as="font" type="font/woff2" crossorigin>使用 font-display 控制字体加载时的显示方式
| 适用场景 | 值 | 行为 |
|---|---|---|
swap | 立即用后备字体显示文本，字体加载完成后替换 | 内容优先，推荐 |
block | 隐藏后备文本最多 3 秒，等待字体加载 | 图标必须精确显示 |
optional | 极短等待时间，如果字体未加载就用后备字体 | 弱网环境优先 |
自托管时可以在 CSS 中覆盖 FontAwesome 的 font-display 行为：
@font-face {
font-family: 'Font Awesome 6 Free';
font-display: swap; /* 或 optional 取决于你的需求 */
src: url('/fonts/fa-solid-900.woff2') format('woff2');
}通过 ESM 导入仅引入实际使用的图标
只导入你实际使用的图标
import { faUser, faHome, faSearch } from '@fortawesome/free-solid-svg-icons'
import { faTwitter } from '@fortawesome/free-brands-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
或者使用 tree-shaking 构建
webpack/vite 会自动移除未使用的图标优化效果对比总结
为中国大陆用户使用国内可访问的 CDN 服务
由又拍云赞助，国内访问极速
cdn.bootcdn.net/ajax/libs/font-awesome/6.7.2/css/all.min.css
阿里云/腾讯云 OSS + CDN，完全可控
your-bucket.oss-cn-hangzhou.aliyuncs.com/fa/css/all.min.css
如果你的项目使用特定且固定的图标集（如管理后台），可以将所有用到的图标合并为一个 SVG Sprite：
<!-- 使用 SVG Sprite（一次性请求，后续零消耗） -->
<svg><use href="/icons/sprite.svg#user"></use></svg>
<svg><use href="/icons/sprite.svg#home"></use></svg>所有图标单次 HTTP 请求，后续零带宽消耗
| 方案 | 体积 | 请求数 | 实现难度 | 推荐指数 |
|---|---|---|---|---|
| 全量 CDN（默认） | ~430 KB | 3-4 | 简单 | 低（大项目不推荐） |
| 按风格加载 | ~200 KB | 2-3 | 简单 | 中等 |
| SVG 框架 + 按需导入 | 5-50 KB | 1 | 需打包工具 | 首选 |
| SVG Sprite | 1-20 KB | 1 | 需构建工具 | 极佳 |
| 自托管 + 缓存 + Brotli | 100-200 KB | 1-2 | 需服务器配置 | 推荐 |