텍스트 압축 및 코드 분할 및 최신 이미지 형식 - 성능 최적화

사이드 프로젝트 성능을 최적화하기 위해 다음을 시도했습니다.

1. 텍스트 압축
2. 코드 분할
3. 현대적인 이미지 형식.

---

프로파일러

내가 만든 앱은 Vite와 pnpm을 사용했습니다. 최신 웹 빌드 도구는 빌드 프로세스에서 기본적으로 웹 성능을 자동으로 최적화합니다. 따라서 pnpm run build를 수행한 다음 pnpm dlx가 dist를 제공할 수 있습니다. 그런 다음 Chrome DevTools의 Lighthouse를 가이드로 사용하여 나열된 각 병목 현상을 해결하세요.

텍스트 압축 활성화

FCP 및 LCP에 영향을 미칩니다.

Lighthouse가 가장 먼저 제안하는 것은 br 또는 gzip과 같은 알고리즘을 사용하여 텍스트를 압축하는 것입니다.

일반적인 관행은 웹 요청을 할 때마다 Accept-Encoding: gzip을 추가하는 것입니다. 제가 만들고 있는 앱은 리소스를 로컬로 제공하기 때문에 vite-plugin-compress를 설치하여 파일을 압축했습니다.

1단계: vite-plugin-compress 설치
2단계: vite.config.js 파일을 구성하고 플러그인과 일부 매개변수를 추가합니다. Google 개발자가 제안한 대로 gzip보다 최대한 br(brotliCompress)를 사용해야 합니다.

예를 들어

viteCompression({
      verbose: true,
      disable: false,
      algorithm: 'brotliCompress',
      ext: '.br',
    }),

3단계: pnpm run build를 실행하여 압축

.js 및 .css 파일을 성공적으로 압축했습니다.

로그:

✨ [vite-plugin-compression]:algorithm=brotliCompress - 파일이 성공적으로 압축되었습니다.

Vite는 기본적으로 .gzip을 사용하여 파일을 압축하지만 brotliCompress는 빌드 프로세스 중에 압축하는 것이 더 좋습니다.

gzip으로 Vite

vite v5.4.10 제작용 건물...
✓ 654개 모듈이 변형되었습니다.

index-B9QUW17e.css 8.60kB │ gzip: 2.33kB
PauseMenu-DjZ95K-6.js 1.77kB │ gzip: 0.62kB
index-ohAKp9W9.js 1,688.05kB │ gzip: 454.20kB

br을 사용한 Vite-플러그인 압축

✨ [vite-plugin-compression]:algorithm=brotliCompress - 파일이 성공적으로 압축되었습니다:
PauseMenu-DjZ95K-6.js.br 1.73kb / brotli압축: 0.51kb
index-B9QUW17e.css.br 8.40kb / brotli압축: 1.97kb
index-ohAKp9W9.js.br 1648.49kb / brotli압축: 345.30kb

---

사용하지 않는 JavaScript 줄이기

FCP 및 LCP에 영향을 미칩니다.

Google DevTools의 Coverage 탭을 사용하여 20kbs가 넘는 사용되지 않은 바이트가 있는 스크립트를 확인하세요.

React와 함께 Vite를 사용하고 있기 때문에 사용하지 않는 JavaScript를 줄이기 위해서는 코드 분할이 가장 먼저 필요합니다.

React에서는 및 lazy()가 도움이 될 수 있습니다.

1. 를 사용하여 전체 앱을 래핑하고
   Loading
   와 같은 대체 UI를 제공합니다. 이는 앱이 로드될 때 대체 UI를 제공합니다.
2. lazy()를 사용하여 초기 페이지에서 사용되지 않은 구성 요소를 래핑합니다. 예를 들어 게임의 경우 사용자가 Esc 키를 누르면 마무리할 수 있는 메뉴가 팝업됩니다.

---

최신 형식으로 이미지 제공

Chrome 개발자는 AVIF 또는 WebP 형식으로 이미지를 제공할 것을 제안합니다. WebP는 여러 브라우저에서 더 많은 지원을 제공하기 때문에 선택했습니다.

최신 버전의 Chrome, Firefox, Safari, Edge, Opera는 WebP를 지원하지만 AVIF 지원은 더 제한적입니다.

WebP 이미지 포맷 지원 정보는 Can I use에서 확인하실 수 있습니다.

WebP에 cwebp 라이브러리를 설치하고 cwebp -q 50 Images/flower1.jpg -o Images/flower1.webp 명령을 사용하여 .png를 .webp로 변환할 수 있습니다. .

이 명령은 Images/flower1.jpg 파일을 품질 50(0이 가장 나쁨, 100이 가장 좋음)으로 변환하여 Images/flower1.webp로 저장합니다.

압축 결과가 상당히 인상적입니다. 파일 중 하나의 크기가 3.5MB에서 178kb로 줄었습니다. 정보 강도가 낮은 경우에도 4배 압축됩니다.

간단한 .bat 스크립트를 작성하여 대상 폴더 아래의 모든 .png 이미지를 .webp 이미지로 자동 변환할 수도 있습니다.

viteCompression({
      verbose: true,
      disable: false,
      algorithm: 'brotliCompress',
      ext: '.br',
    }),

---

참조

• 사용하지 않는 JavaScript 제거
• 커버리지 탭에서 사용된 CSS와 사용되지 않은 CSS를 확인하세요.
• 현대적인 형식으로 이미지를 제공하세요.
• 명령줄을 사용하여 WebP 이미지 생성
• 미리 컴파일된 유틸리티
• WebP 이미지 형식 - 사용할 수 있나요
• 최대 컨텐츠 포함 페인트(LCP)
• 첫번째 만족 페인트(FCP)

위 내용은 텍스트 압축 및 코드 분할 및 최신 이미지 형식 - 성능 최적화의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!