Font Awesome은 인기있는 아이콘 라이브러리이지만 사용 방식에서 성능이 저하 될 수 있습니다. 서브 세트별로 Font Awesome을 선택하면 글꼴 파일에서 사용하지 않은 글리프를 제거 할 수 있습니다. 이렇게하면 네트워크에서 전송되는 바이트 수가 줄어들어 성능이 향상됩니다.
글꼴 멋진 프로젝트에서 글꼴 서브 세트 선택을하고 어떤 변화가 있을지 살펴 보겠습니다. 다음 과정에서는 Font Awesome이 제공 한 CSS 파일을 가져오고 웹 글꼴을 사용하여 아이콘을 표시한다고 가정합니다.
데모를 위해서는 Font Awesome의 기본 CSS 파일을 가져 오는 HTML 파일 하나만 있습니다. 합리적인 아이콘 샘플을 얻으려면 측면 프로젝트에 사용하는 각 아이콘을 나열했습니다.
하위 집합에서 글꼴을 선택하기 전에 HTML 파일이 브라우저에서 보이는 방법은 다음과 같습니다.
다음은로드 된 컨텐츠를 표시하는 DevTool의 네트워크 탭입니다.
이제 글꼴 파일 이이 모든 것을 렌더링하는 데 얼마나 많은 바이트가 필요한지 살펴 보겠습니다.
우리는 Font Awesome을 사용하는 가장 직접적이고 최악의 성능 방법이 무엇인지 알고 싶습니다. 다시 말해, 우리는 가장 느리고 최적화되지 않은 솔루션을 구현하려고합니다. Font Awesome에서 제공하는 All.min.css 파일을 가져오고 있습니다.
위에서 볼 수 있듯이 압축 파일 크기는 33.4kb이며 나쁘지 않습니다. 불행히도, 우리가 DevTool의 글꼴 탭을 보았을 때 상황이 악화되었습니다.
글꼴 파일은 브라우저의 JavaScript만큼 비싸지 않지만 브라우저가 몇 개의 작은 아이콘에 대해서만 다운로드 해야하는 바이트입니다. 일부 사용자는 모바일 장치에서 웹 사이트를 탐색하고 강력하거나 빠른 인터넷 연결을 피할 수 있다고 생각하십시오.
Font Awesome의 메인 스타일 시트에는 수천 개의 아이콘 정의가 포함되어 있습니다. 그러나 수십 개의 아이콘 만 필요하면 어떻게 될까요? 우리는 원치 않는 것들을 확실히 제거 할 수 있습니까?
스타일 시트에서 코드를 분석하고 사용하지 않은 스타일을 제거하는 도구가 많이 있습니다. 나는 purifycss를 사용하고 있습니다. 이 라이브러리는 더 이상 적극적으로 유지되지 않지만 철학은 동일하며 궁극적으로 우리가 찾고있는 해결책이 아닙니다. 그러나 CSS가 필요한 컨텐츠 만 포함되도록 자두가 어떻게 발생하는지 살펴 보겠습니다. 다음 스크립트를 사용하여 구현할 수 있습니다.
<code>const purify = require("purify-css"); const content = ["./dist/**/*.js"]; // Vite 构建的内容purify(content, ["./css/fontawesome/css/all.css"], { minify: true, output: "./css/fontawesome/css/font-awesome-minimal-build.css" });</code>새로 구축 된 CSS 파일을로드하면 네트워크를 통해 전송하는 CSS 바이트 수는 33KB에서 7.1KB로 크게 떨어졌습니다!
불행히도, 우리의 다른 글꼴 멋진 글꼴 파일은 변경되지 않았습니다.
무슨 일이에요? Purifycss는 그 일을합니다. 사용하지 않은 모든 아이콘에 대한 CSS 규칙을 제거합니다. 불행히도 CSS 규칙뿐만 아니라 글리프를 다듬기 위해 실제 글꼴 파일을 입력 할 수 없습니다.
글꼴 파일을 처리 할 수있는 PurifyCSS와 같은 도구가 있다면 좋을 것입니다 ...
물론 글꼴 파일에서 사용하지 않은 컨텐츠를 제거 할 수있는 도구가 있으며 서브 세트 선택 도구 라고합니다. 서브 세트 선택 도구는 웹 페이지를 분석하고 글꼴 파일을보고 사용하지 않은 문자를 트림합니다. Zach Leatherman의 Glyphhanger와 같은 글꼴을 선택하기위한 도구의 많은 부분 집합이 있습니다. FONT Awesome은 내장 서브 세트 선택 도구와 함께 제공되므로 서브 세트를 선택하는 것이 매우 간단합니다. 보자.
다가오는 자동 서브 세트 선택 및 수동 서브 세트 선택 도구에는 유료 글꼴 멋진 프로 가입이 필요합니다.
Font Awesome을 사용하면 Font Awesome Documentation에 설명되어있는 툴킷 이라는 것을 설정할 수 있습니다.“Font Awesome Documentation에서“프로젝트에 쉽게 추가 할 수있는 깨끗하고 가벼운 패키지에 필요한 모든 아이콘과 멋진 콘텐츠를 쉽게 넣을 수있는 배낭”. 따라서 모든 CSS 파일을 가져 오는 대신 툴킷은 HTML 파일에 추가 할 수있는 파일을 제공합니다.
툴킷이 글꼴 파일에서 실제로 필요한 글리프 만 보내는 단일 스크립트 태그. 툴킷을 만드는 데 약 1 분이 걸립니다. 이와 유사한 스크립트 태그를 얻을 수 있습니다.
<code></code>
스크립트가로드되면 이제 CSS 파일이 전혀없고 JavaScript 파일은 4KB에 불과합니다. DevTools 글꼴 탭을 다시 살펴보고 일부 하위 세트 선택을 한 후 어떤 글꼴 파일이로드되었는지 확인해 봅시다.
우리는 757KB에서 331KB로 떨어졌습니다. 50% 이상 감소했습니다 . 그러나 우리는 특히 54 개의 아이콘 만 렌더링하는 경우에도 여전히 더 잘할 수 있습니다. Font Awesome의 수동 글꼴 서브 세트 선택 도구가 작동하는 곳입니다.
Font Awesome이 우리가 원하는 정확한 아이콘을 선택한 다음 사용자 정의 빌드를 제공 할 수있는 도구를 제공한다면 좋지 않습니까? 예, 그들은했습니다. 어떤 이유로 든, 그들은 이것을 과대 광고하지 않았지만 실제로 글꼴의 수동 서브 세트 선택에 전념하는 데스크탑 앱이 있습니다. 앱은 웹 사이트에서 다운로드 할 수 있습니다. 그러나 자동 서브 세트 선택 도구와 같이이 앱에는 실제로 사용하기 위해 유료 글꼴 멋진 구독이 필요합니다.
아이콘을 검색하고 시리즈를 선택하고 원하는 것을 추가 한 다음 큰 파란색 빌드 버튼을 클릭하십시오. 이것은 실제로 글꼴 멋진 아이콘의 사용자 정의 서브 세트를 생성하기 위해해야 할 모든 작업입니다.
버튼을 클릭 한 후 Font Awesome은 사용자 정의 빌드를 저장 해야하는 위치를 묻고 필요한 모든 것을 갖춘 지퍼 파일을 버립니다. 실제로, 당신이 얻을 수있는 구조는 일반적인 글꼴 멋진 다운로드와 정확히 동일하며, 이는 특히 간단하게 만듭니다. 물론, 사용자 정의 빌드를 프로젝트 파일로 저장하여 나중에 다시 열어 필요에 따라 아이콘을 추가하거나 제거 할 수 있습니다.
로드하는 아이콘의 최종 크기를보기 위해 DevTools를 열면 먼저 실제 글꼴 파일 자체를 살펴 보겠습니다. 사용자 정의 빌드는 브라우저가 사용하는 내용에 따라 다양한 유형을 만듭니다. Chrome이로드 한 .woff2 파일에 중점을 두겠습니다. 여전히 존재하기 전에 존재했던 동일한 조명, 규칙적인 듀오 톤, 솔리드 및 브랜드 파일이지만 이번에는 5KB보다 큽니다. 그리고 이것은 GZIP에 의해 압축되기 전입니다!
CSS 파일은 어떻습니까? 8KB로 줄어 듭니다. GZIP를 사용하여 압축 한 후 2KB 만 있습니다!
DevTools의 최종 통계는 다음과 같습니다.
떠나기 전에 데스크톱 글꼴 서브 세트 GUI 도구에 CI/CD와 통합하여 빌드 타임에 이러한 파일을 생성 할 수있는 CLI가 있는지 궁금합니다. 아직 답은 아닙니다. 나는 글꼴 멋진 직원에게 이메일을 보냈고 그들은 그들이 계획하고 있다고 말했다. 게시되면 사용자가 빌드 프로세스를 단순화 할 수 있습니다.
보시다시피, 글꼴과 같은 도구를 사용하여 아이콘을 표시하는 것은 매우 멋지다. 그러나 기본 사용법이 항상 프로젝트를 수행하는 가장 좋은 방법은 아닙니다. 가장 작은 파일 크기를 가능하게하려면 서브 세트의 글꼴을 선택하는 것은 필요하지 않은 것을 다듬고 필요한 것을 제공하기 위해 할 수있는 일입니다. 그것은 우리가 원하는 성능, 특히 전통적으로 처리하기 어려운 글꼴로드와 관련하여 우리가 원하는 성능입니다.
위 내용은 글꼴을 서브 세트 폰트 굉장한 성능을 향상시킵니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
