코드 분할로 자바스크립트 페이로드 줄이기

기다리는 것을 좋아하는 사람은 없습니다. 웹사이트 로드 시간이 3초를 넘기면 사용자의 50% 이상이 웹사이트를 떠납니다.

대량의 JavaScript 페이로드를 전송하면 사이트 속도에 상당한 영향을 미칩니다. 애플리케이션의 첫 페이지가 로드되는 즉시 모든 JavaScript를 사용자에게 전달하는 대신 번들을 여러 조각으로 분할하여 맨 처음에 필요한 내용만 전송하세요.

코드 분할이 유용한 이유는 무엇인가요?

코드 분할은 시작 시간을 최소화하려는 기법입니다. 시작 시 더 적은 수의 JavaScript를 제공하면 이 중요한 기간 동안 기본 스레드 작업을 최소화하여 애플리케이션이 더 빠르게 상호작용하도록 할 수 있습니다.

코어 웹 바이탈의 경우 시작 시 다운로드되는 자바스크립트 페이로드를 줄이면 최초 입력 반응 시간 (FID)다음 페인트에 대한 상호작용 (INP) 시간이 단축됩니다. 이렇게 하는 이유는 기본 스레드를 확보하여 애플리케이션이 JavaScript 파싱, 컴파일, 실행 관련 시작 비용을 줄여 사용자 입력에 더 빠르게 응답할 수 있기 때문입니다.

웹사이트 아키텍처에 따라, 특히 웹사이트에서 클라이언트 측 렌더링에 크게 의존하는 경우 마크업을 렌더링하는 JavaScript 페이로드의 크기를 줄이면 최대 콘텐츠 렌더링 시간 (LCP) 시간이 개선될 수 있습니다. 이는 클라이언트 측 마크업이 완료될 때까지 브라우저에서 LCP 리소스를 검색하는 데 지연되거나 기본 스레드가 너무 사용되어 해당 LCP 요소를 렌더링할 수 없을 때 발생할 수 있습니다. 두 경우 모두 페이지의 LCP 시간을 지연시킬 수 있습니다.

측정

Lighthouse는 페이지에서 모든 자바스크립트를 실행하는 데 상당한 시간이 걸리는 경우 감사 실패를 표시합니다.

실행 시간이 너무 오래 걸리는 스크립트를 보여주는 Lighthouse 감사 실패

사용자가 애플리케이션을 로드할 때 초기 경로에 필요한 코드만 전송하도록 JavaScript 번들을 분할합니다. 이렇게 하면 파싱 및 컴파일해야 하는 스크립트의 양이 최소화되어 페이지 로드 시간이 단축됩니다.

webpack, Parcel, Rollup과 같이 널리 사용되는 모듈 번들러를 사용하면 동적 가져오기를 사용하여 번들을 분할할 수 있습니다. 예를 들어 양식이 제출될 때 실행되는 someFunction 메서드의 예를 보여주는 다음 코드 스니펫을 살펴보세요.

import moduleA from "library";

form.addEventListener("submit", e => {
  e.preventDefault();
  someFunction();
});

const someFunction = () => {
  // uses moduleA
}

여기서 someFunction는 특정 라이브러리에서 가져온 모듈을 사용합니다. 이 모듈을 다른 곳에서 사용하지 않는 경우 동적 가져오기를 사용하여 사용자가 양식을 제출할 때만 모듈을 가져오도록 코드 블록을 수정할 수 있습니다.

form.addEventListener("submit", e => {
  e.preventDefault();
  import('library.moduleA')
    .then(module => module.default) // using the default export
    .then(() => someFunction())
    .catch(handleError());
});

const someFunction = () => {
    // uses moduleA
}

모듈을 구성하는 코드가 초기 번들에 포함되지 않고 이제는 지연 로드되거나 양식 제출 후 필요할 때만 사용자에게 제공됩니다. 페이지 성능을 더욱 개선하려면 중요한 청크를 미리 로드하여 우선순위를 지정하고 더 빨리 가져옵니다.

이전 코드 스니펫은 간단한 예이지만 서드 파티 종속 항목의 지연 로드는 대규모 애플리케이션에서 일반적인 패턴이 아닙니다. 일반적으로 서드 파티 종속 항목은 자주 업데이트되지 않으므로 캐시할 수 있는 별도의 공급업체 번들로 분할됩니다. SplitChunksPlugin을 사용하여 이를 수행하는 방법에 관한 자세한 내용을 확인할 수 있습니다.

클라이언트 측 프레임워크를 사용할 때 경로 또는 구성요소 수준에서 분할하는 것은 애플리케이션의 여러 부분을 지연 로드하는 데 더 간단한 접근 방식입니다. webpack을 사용하는 여러 인기 있는 프레임워크는 직접 구성을 살펴보는 것보다 지연 로드를 쉽게 만들 수 있도록 추상화를 제공합니다.