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

Houssein Djirdeh

Jeremy Wagner

누구도 기다리는 것을 좋아하지 않습니다. 로드하는 데 3초 이상 걸리면 사용자의 50% 이상이 웹사이트를 이탈합니다.

큰 JavaScript 페이로드를 전송하면 사이트 속도가 크게 저하됩니다. 애플리케이션의 첫 번째 페이지가 로드되는 즉시 모든 JavaScript를 사용자에게 전송하는 대신 번들을 여러 부분으로 분할하고 처음에 필요한 부분만 전송합니다.

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

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

Core Web Vitals의 경우 시작 시 다운로드되는 JavaScript 페이로드를 줄이면 다음 페인트에 대한 상호작용(INP) 시간이 개선됩니다. 기본 스레드를 해제하면 애플리케이션이 JavaScript 파싱, 컴파일, 실행 관련 시작 비용을 줄여 사용자 입력에 더 빠르게 응답할 수 있기 때문입니다.

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

핵심사항: 웹사이트에서 클라이언트 측 렌더링만 사용하는 경우 서버 측 렌더링(SSR)을 사용하여 서버가 탐색 요청에 대한 응답으로 클라이언트에 의미 있는 마크업을 전송하도록 해야 합니다. 이렇게 하면 브라우저 미리 로드 스캐너가 기회주의적으로 리소스를 더 효과적으로 가져올 수 있습니다.

측정

Lighthouse는 페이지에서 모든 JavaScript를 실행하는 데 시간이 많이 걸리는 경우 감사 실패를 표시합니다.

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을 사용하는 많은 인기 프레임워크는 구성을 직접 살펴보는 것보다 지연 로드를 더 쉽게 만들기 위한 추상화를 제공합니다.