Giảm Kích Thước Font Awesome của Bạn Đến 98% với Subsetting Tự Động
Bạn có mệt mỏi khi phải tải xuống hơn 800KB Font Awesome trong khi chỉ sử dụng một vài biểu tượng? Hãy cùng khám phá một công cụ giúp tự động phát hiện các biểu tượng bạn thực sự cần và tạo ra các font con nhỏ gọn.
Vấn Đề
Font Awesome là một thư viện tuyệt vời, nhưng nó đi kèm với một chi phí hiệu suất không nhỏ. Khi bạn bao gồm toàn bộ font FA, trình duyệt sẽ tải xuống toàn bộ tệp font ngay cả khi bạn chỉ sử dụng một vài biểu tượng. Điều này có nghĩa là:
- FA6 Solid: ~345KB
- FA6 Duotone: ~458KB
- Tổng tải: Thường trên 1MB bao gồm cả CSS
Người dùng của bạn phải chịu chi phí này trên mỗi lần tải trang, đặc biệt là đau đớn hơn trên các kết nối di động.
Giải Pháp: fa-subset
Tôi đã phát triển fa-subset để giải quyết vấn đề này. Đây là một công cụ Python có khả năng:
- Quét mã nguồn của bạn để tìm tất cả các lớp
fa-*mà bạn thực sự sử dụng - Phát hiện các kiểu Font Awesome (solid, duotone, brands, v.v.) một cách tự động
- Tạo ra các font con nhỏ gọn chỉ chứa các biểu tượng bạn cần
- Tạo CSS tối ưu tham chiếu đến các font con này
Kết Quả Thực Tế
Dưới đây là những gì đã xảy ra trên một trang web sản xuất:
Trước: 803 KB font + CSS (~1.29 MB tổng)
Sau: 14.5 KB font + CSS (~0.50 MB tổng)
Tiết kiệm: 98.2% giảm kích thước font, 61% giảm tổng tảiTính Năng Nổi Bật
✅ Hoạt động với FA5 & FA6 (tất cả các kiểu: solid, regular, light, thin, duotone, brands, sharp)
✅ Xử lý các bộ chọn phức tạp như .fa-duotone.fa-house:after
✅ Hỗ trợ duotone với việc xử lý hai mã điểm chính xác
✅ Chia nhỏ nhiều gói (font tối ưu riêng cho từng kiểu)
✅ Báo cáo chạy khô với phân tích chi tiết
✅ Hoạt động với CSS đã nén và bất kỳ phần mở rộng tệp nào
Bắt Đầu Nhanh
Điều Kiện Tiên Quyết
pip install fonttoolsCách Sử Dụng Cơ Bản
- Chạy thử để xem những gì sẽ được tối ưu:
python3 bin/fa-subset.py \
--src ./src ./templates \
--ext .html .php .twig .js \
--pack solid:css=./css/fontawesome.min.css,font=./fonts/fa-solid-900.ttf \
--pack duotone:css=./css/duotone.min.css,font=./fonts/fa-duotone-900.ttf \
--out ./optimised \
--dry-run- Tạo font con (gỡ bỏ
--dry-run):
python3 bin/fa-subset.py \
--src ./src ./templates \
--ext .html .php .twig .js \
--pack solid:css=./css/fontawesome.min.css,font=./fonts/fa-solid-900.ttf \
--pack duotone:css=./css/duotone.min.css,font=./fonts/fa-duotone-900.ttf \
--out ./optimised- Bao gồm CSS tối ưu:
<link rel="stylesheet" href="/optimised/solid/fontawesome.solid.subset.min.css">
<link rel="stylesheet" href="/optimised/duotone/fontawesome.duotone.subset.min.css">Phát Hiện Thông Minh
Công cụ này xử lý thông minh:
Nội dung hỗn hợp:
<i class="fa-solid fa-house"></i> <!-- Gói Solid -->
<i class="fa-duotone fa-user"></i> <!-- Gói Duotone -->
<i class="fas fa-search"></i> <!-- FA5 alias → solid -->
<span class="fa-brands fa-github"></span> <!-- Gói Brands -->Bộ chọn phức tạp trong CSS:
.fa-duotone.fa-house:after { content: "\f015\f015"; } /* Mã điểm chính đôi Duotone */
.custom-icon.fa-solid.fa-star { /* Kiểu tùy chỉnh */ }Nội dung động với các fallback chính xác:
// Công cụ tìm các biểu tượng ngay cả trong chuỗi mẫu JS
const iconHtml = `<i class="fa-solid fa-${iconName}"></i>`;Tính Năng Nâng Cao
Báo Cáo JSON cho CI/CD
--report-json ./report.json --strict-stylesRất phù hợp cho các pipeline CI để phát hiện xung đột kiểu:
{
"conflicts": [
{"file": "nav.html", "line": 42, "icon": "user", "styles": ["solid", "duotone"]}
],
"packs": {
"solid": {"icons_found": ["house", "user"], "codepoints": ["U+F015", "U+F007"]}
}
}Tích Hợp với Composer
Thêm các script này vào composer.json của bạn:
{
"scripts": {
"fa-analyse": "python3 bin/fa-subset.py --src ./src --pack solid:css=./css/fontawesome.min.css,font=./fonts/fa-solid-900.ttf --out ./optimised --dry-run",
"fa-optimise": "python3 bin/fa-subset.py --src ./src --pack solid:css=./css/fontawesome.min.css,font=./fonts/fa-solid-900.ttf --out ./optimised"
}
}Chạy các lệnh sau:
composer fa-analyse # Xem những gì sẽ được tối ưu
composer fa-optimise # Tạo font conTác Động Đến Hiệu Suất
Sự khác biệt rõ rệt:
Trước (Full FA6):
- Thời gian tải nội dung đầu tiên: chậm hơn do tải font
- Điểm số hiệu suất Lighthouse: bị phạt vì tài nguyên lớn
- Người dùng di động: tiêu tốn băng thông đáng kể
Sau (Subset):
- Tải trang đầu tiên nhanh hơn
- Điểm số Lighthouse tốt hơn
- Người dùng di động hài lòng hơn
- Giảm chi phí CDN
Thực Hành Tốt Nhất
- Lưu cache mạnh mẽ: Phục vụ các font con với các tiêu đề
Cache-Controldài - Sử dụng nén: Bật Brotli/gzip trên máy chủ của bạn
- Một kiểu cho mỗi biểu tượng: Không trộn
fa-solidvàfa-duotonetrên cùng một phần tử - Chạy trong CI: Sử dụng
--strict-stylesđể phát hiện xung đột sớm
Các Trường Hợp Sử Dụng Thông Dụng
Chủ đề WordPress:
--src ./wp-content/themes/mytheme --ext .phpDự án React/Vue:
--src ./src --ext .js .jsx .vue .tsxỨng dụng Laravel:
--src ./resources/views ./app --ext .blade.php .phpKhắc Phục Sự Cố
Biểu tượng hiển thị dưới dạng ô vuông?
- Đảm bảo bạn đang bao gồm CSS con, không phải gốc
- Kiểm tra tab Network - tệp .woff2 con nên được tải
- Xác minh các tiêu đề CORS nếu phục vụ từ CDN
"Không tìm thấy quy tắc biểu tượng trong CSS"?
- Sử dụng
all.min.csshoặc các tệp CSS theo kiểu (ví dụ:solid.min.css) - CSS phải chứa các ánh xạ biểu tượng, không chỉ biến
Tại Sao Điều Này Quan Trọng
Tối ưu hóa font thường bị bỏ qua, nhưng nó là một trong những cải tiến hiệu suất có tác động lớn nhất mà bạn có thể đạt được. Với fa-subset, bạn sẽ nhận được:
- Giảm kích thước tệp lớn (trên 90% thường thấy)
- Tải trang nhanh hơn đặc biệt trên di động
- Điểm Core Web Vitals tốt hơn
- Giảm chi phí băng thông
- Không cần bảo trì sau khi thiết lập
Bắt Đầu Ngay
Repository: fa-subset trên GitHub
Giấy phép: BSD-2-Clause (mang theo giấy phép FA của bạn)
Công cụ bao gồm tài liệu chi tiết, ví dụ và hướng dẫn tích hợp CI. Hãy thử nghiệm trên dự án tiếp theo của bạn - người dùng của bạn (và điểm số Lighthouse) sẽ cảm ơn bạn!
Được thực hiện bởi Sam Sheridan tại Sheridan Internet. Không liên kết với Font Awesome/Fonticons Inc.
