자바스크립트 파일을 축소하면 페이로드 크기와 스크립트 파싱 시간을 줄일 수 있습니다. Lighthouse 보고서의 기회 섹션에는 축소되지 않은 모든 JavaScript 파일과 이러한 파일이 축소되었을 때 절감할 수 있는 키비바이트 (KiB)의 내용이 표시됩니다.
![Lighthouse JavaScript Minify 감사 스크린샷](https://developer.chrome.google.cn/static/docs/lighthouse/performance/unminified-javascript/image/a-screenshot-the-lightho-e35d561e16c6f.png?authuser=9&hl=ko)
자바스크립트 파일을 축소하는 방법
축소는 작지만 완전히 유효한 코드 파일을 만드는 데 필요하지 않은 공백과 모든 코드를 삭제하는 프로세스입니다. Terser는 널리 사용되는 자바스크립트 압축 도구입니다. webpack v4에는 축소된 빌드 파일을 만들 수 있는 이 라이브러리용 플러그인이 기본적으로 포함되어 있습니다.
스택별 안내
Drupal
관리 > 구성 > 개발 페이지에서 JavaScript 파일 집계를 사용 설정했는지 확인합니다. 추가 모듈을 통해 고급 집계 옵션을 구성하여 JavaScript 애셋을 연결, 축소, 압축하여 사이트 속도를 높일 수도 있습니다.
Joomla
다양한 Joomla 확장 프로그램을 사용하면 스크립트를 연결, 축소, 압축하여 사이트 속도를 높일 수 있습니다. 이 기능을 제공하는 템플릿도 있습니다.
Magento
Terser를 사용하여 정적 콘텐츠 배포에서 모든 자바스크립트 애셋을 축소하고 기본 제공 축소 기능을 사용 중지합니다.
React
빌드 시스템이 JS 파일을 자동으로 축소하는 경우 애플리케이션의 프로덕션 빌드를 배포해야 합니다. React 개발자 도구 확장 프로그램으로 이를 확인할 수 있습니다.
WordPress
다양한 WordPress 플러그인은 스크립트를 연결, 축소, 압축하여 사이트 속도를 높일 수 있습니다. 가능하면 빌드 프로세스를 사용하여 축소를 미리 실행하는 것이 좋습니다.