웹 성능은 웹 응용 프로그램 사용자 체험의 관건적인 부분이다.그것은 전환율에 직접적인 영향을 미친다.월마트는 페이지 탑재 시간이 1초 증가할 때마다 전환율이 2%see source 증가하는 것을 발견했다.만약 이것이 부족하다면 검색엔진은 빠른 사이트를 더욱 선호할 것이다.그들은 이 사이트들에 대한 순위가 느린 사이트보다 높다.따라서 웹 응용 프로그램의 성능을 향상시키면 전환율과 유기적 고객 획득률을 높일 수 있다.

네트워크 명맥

Web Vitals(Chrome팀에서 창조)는 사이트의 성능을 평가하는 지표이다.이러한 지표를 최적화하면 방문객들이 더욱 좋은 체험을 누릴 수 있을 것이다.
핵심 인터넷 이력서는 상술한 웹 페이지와 관련된 인터넷 이력서의 서브집합이다.이 서브집은 세 가지 개성 에너지 측면, 즉 탑재, 상호작용과 시각적 안정성을 주목한다.본고에서 우리는 그 중 두 가지 측면, 즉 적재와 상호작용을 중점적으로 개선할 것이다.이러한 지표는 최대 컨텐트 그리기(LCP)와 첫 입력 지연(FID)을 나타냅니다.많은 전략이 이러한 지표를 개선할 수 있지만, 우리는 패키지의 크기를 줄이는 데 중점을 둘 것이다.

번들 크기

패킷 크기는 LCP 및 FID에 큰 영향을 미칩니다.서버가 제공하는 어플리케이션이든 한 페이지의 어플리케이션이든 결국 비대해진 JavaScript 패키지가 나타납니다.번들이 클수록 번들을 다운로드하고 코드를 조작 가능한 기계 명령으로 해석하며 최종적으로 평가하는 데 걸리는 시간이 많아진다.메인 라인이 그 중 어느 하나에 주목하기만 하면 다른 일을 할 수 없으며, 이것은 LCP와 FID를 증가시킬 것이다.에디 오스마니(Addy Osmani)는 깊이 연구하고 싶다면the cost of JavaScript에 관한 광범위한 글을 썼다.
설령 우리가 프로젝트에서 가장 좋은 실천을 응용했다 하더라도, 예를 들어 트리와 코드 분리를 응용했다 하더라도, 이 패키지는 커질 것이다.그럼 우리 어떡하지?동적 가져오기 및 로드 우선 순위!

동적 가져오기

아는 것은 많지 않지만, 우리는 두 가지 형식의 가져오기, 정적, 동태를 사용할 수 있다.정적 가져오기는 모두가 알고 있는 형식으로 우리의 기본적인 선택이다.이것은 import defaultExport from "module-name"; 번들 프로그램 (예를 들어 Webpack) 을 알려 줍니다. 이 모듈은 우리의 코드를 실행하는 데 필요한 것입니다.bundler는 모듈 코드를 JavaScript 파일에 바인딩합니다.정적 가져오기 모듈이 많을수록 패키지가 커집니다.그러나 모든 수입 상품이 똑같은 것은 아니다.어떤 것은 어떤 사건이 발생할 때까지 코드를 즉시 실행해야 하고, 어떤 것은 불러오는 것을 지연시킬 수 있다.그렇다면 왜 우리는 이 모든 자바스크립트를 한 번에 불러와야 합니까?없습니다. 동적 가져오기를 사용할 수 있습니다.동적 가져오기는 일반적인 함수 호출처럼 보이고 가져오기 모듈 import("module-name").then((module) => ...); 으로 해석된 약속을 되돌려줍니다.동적 가져오기를 사용하면 이 모듈에 단독 연결을 만들고 실행할 때 불러오는 것을 알려 줍니다.이렇게 하면 가져온 모듈이 우리의 메인 패키지에 묶이지 않고 메인 패키지의 소형과 효율을 유지할 수 있습니다.React lazy와 Next.js dynamic는 동적 가져오기를 이용하여 구성 요소에 대해 쉽게 로드 지연 반응을 한다.매개변수로 함수를 수신하고 React 구성 요소를 반환하는 함수입니다.함수 매개 변수는 React 구성 요소로 해석된 자신의 약속을 되돌려야 합니다.다음은 하나의 예이다. const DynamicComponent = dynamic(() => import('./component')).물론 이들의 반응은 모두'게으름'과'다음'이다.js dynamic은 구성 요소가 불러올 때 오류를 처리하고 원소를 되돌려 주는 방법을 제공합니다.그래서 지금 우리는 두 등급의 수입이 있다.첫 번째는 정적 가져오기입니다. 모듈을 패키지에 묶습니다.두 번째는 동적 가져오기입니다. 요청을 받은 후 모듈을 단독 패키지로 가져옵니다.이것은 우리의 성능을 향상시킬 수 있지만, 페이지를 완전히 불러온 후에만 자바스크립트 패키지를 불러올 수 있습니다.

페이지 로드 후 가져오기

이 섹션에서는 React lazy와 Next를 어떻게 사용하는지 살펴봅니다.js dynamic에서 새 함수를 만듭니다. 이 함수는 페이지를 불러온 후에만 구성 요소를 가져옵니다.간단히 보기 위해서, 나는 넥스트로 그것을 어떻게 실현하는지 보여줄 것이다.js, 그러나 같은 개념은 React lazy나 Vue 등 다른 프레임워크에 쉽게 적용될 수 있다.
우리는 먼저 함수를 만들고, 이 함수는 페이지에 불러온 후에 해석할 약속을 되돌려줍니다.페이지 불러오는 과정은 세 가지 단계를 포함하는데 그것이 바로 불러오기, 상호작용과 완성이다.함수는 우리가 어느 단계에서 자원을 불러와야 하는지 설명하는 매개 변수를 수신합니다.우리는 readystatechange 이벤트를 사용하여 불러오는 과정의 변경 사항을 감청합니다.

export default function onPageLoad(
  readyState: DocumentReadyState = 'interactive',
): Promise<void> {
  return new Promise((resolve) => {
    if (
      document.readyState === readyState ||
      document.readyState === 'complete'
    ) {
      return resolve();
    }

    const callback = (event: ProgressEvent<Document>) => {
      if (
        event.target.readyState === readyState ||
        document.readyState === 'complete'
      ) {
        document.removeEventListener('readystatechange', callback);
        return resolve();
      }
    };
    document.addEventListener('readystatechange', callback);
  });
}

우리의 onPageLoad 함수는 우선 계획에 따라 약속을 되돌려줍니다.promise에서 문서의 현재 준비 상태를 검사합니다.이것은 우리가 반드시 처리해야 할 중요한 사건이다.그렇지 않으면 약속은 영원히 실현될 수 없을 것이다.페이지가 로드되면 약속을 해결합니다.그 다음에 우리는 이벤트 탐지기에 리셋 함수를 만들고 readystatechange 이벤트를 구독합니다.리셋 중에, 우리는 문서의 새로운 준비 상태를 검사한다.만약 그것이 요청 상태와 같거나 문서가 완전히 불러왔다면, 우리는 약속을 해결하고 구독을 취소할 수 있습니다.
이것은 번거로운 작업입니다. 현재 유일하게 해야 할 일은 페이지를 불러올 때 구성 요소를 불러오는 새로운 동적 함수를 만드는 것입니다.

import dynamic from 'next/dynamic';
import onPageLoad from './onPageLoad';

export default function dynamicPageLoad<P>(
  loader: () => LoaderComponent<P>,
  readyState: DocumentReadyState = 'interactive',
): React.ComponentType<P> {
  return dynamic<P>(() => onPageLoad(readyState).then(loader), { ssr: false });
}

예를 들면 다음.js dynamic 함수, 로더 함수를 받았습니다. 이 함수는promise를 되돌려줍니다. 로더 구성 요소와 불러오는 우선 순위를 정하기 위해 선택할 수 있는 준비 상태를 포함합니다.함수에서, 우리는 좋은 구동적 함수를 사용했지만, 캐리어 함수를 제공하기 전에, 우리는 그것을 우리가 만든 onPageLoad 함수에 연결했다.이렇게 하면 페이지를 불러오기 전에 import 문장을 호출하지 않을 수 있습니다.동적 함수의 두 번째 인자는 서버에서 이 표현식을 계산하는 것을 비활성화합니다.이것은 필수적입니다. 왜냐하면 우리가 사용하는 것은 문서 대상이기 때문에 클라이언트에게만 사용할 수 있습니다.
다음과 같이 페이지를 로드한 후 구성 요소를 가져올 수 있도록 하는 기능을 사용할 수 있습니다.const DynamicComponent = dynamicPageLoad(() => import('./component')) .
현재, 많은 자바스크립트 코드는 페이지가 불러온 후에만 다운로드, 해석, 평가를 할 수 있습니다.기본 스레드가 중요한 리소스에 더 많은 시간을 할애하여 LCP 및 FID 지표를 향상시킬 수 있도록 합니다.

결론

우수한 네트워크 성능은 우리의 전환율과 SEO를 높일 수 있다.성능을 높이는 방법 중 하나는 초기 패키지 크기를 줄이는 것이다.동적 가져오기를 사용하여 JavaScript 모듈의 로드를 지연시켜 초기 패키지 크기를 줄일 수 있습니다.사용자 정의 동적 함수를 사용하여 페이지를 불러온 후에야 일부 모듈을 불러와서 동적 가져오기의 우선순위를 정하는 방법도 배웠다.
daily.dev 모든 새로운 꼬리표에 가장 좋은 프로그램 뉴스를 제공할 수 있다.우리는 당신이 미래를 해독할 수 있도록 수백 개의 합격 원천을 배열할 것입니다.