#DevHack: Next.js에서 초기 로드 JS 최적화

이제 내 PimpYourOwnBike 웹 사이트가 시작되었습니다. 어디에서 최적화를 할 수 있는지 알아보기 시작했습니다. Next.js 빌드 출력을 볼 때 First Load JS 섹션에서 빨간색 숫자를 발견했습니다.



그것은 내 목록에서 최적화할 첫 번째 항목이 될 것이며, 이 숫자를 빨간색에서 녹색으로 가져옵니다.

이 첫 번째 로드 JS는 무엇입니까?

우선, 이것은 정확히 무엇입니까 First Load JS? 설명서에는 값이 서버 페이지를 방문할 때 다운로드한 자산 수를 기반으로 한다고 명시되어 있습니다. 모두가 공유하는 JS의 양은 별도의 메트릭으로 표시됩니다.

이해하기 쉽게 하기 위해 웹사이트에서 콘텐츠 렌더링을 시작하는 데 필요한 모든 것이 JS입니다. 이 첫 번째 로드 JS 번호를 낮추려면 더 적은 코드를 작성해야 합니다.

Info: <===>

그것은 전적으로 사실이 아니며 달성하기 매우 어려울 수 있지만 번들/청크 크기를 줄여야 합니다.

첫 번째 로드 JS 크기를 낮추는 방법은 무엇입니까?

더 적은 의존성 사용

더 이상 필요하지 않은 참조할 수 있는 종속성이 있는지 코드를 확인하십시오.

나는 이것이 당신이 찾은 대부분의 기사가 이것을 말할 것이라는 것을 알고 있습니다. 그 이유는 매우 효과적이지만 달성하기 쉽지 않기 때문입니다. 대부분의 경우 이러한 종속성이 모두 필요합니다.

지연/동적 로딩 구성 요소 및 종속성

이러한 모든 종속성이 필요한 경우 지연되거나 동적으로 로드될 수 있는 항목을 확인하십시오. 이 접근 방식은 페이지의 모든 초기 구성 요소를 로드하고 덜 중요한 다른 구성 요소를 모두 비동기식으로 로드하거나 나중에 로드하더라도 문제가 되지 않음을 의미합니다.

이 접근 방식의 좋은 점은 사용하려는 종속성에 대한 React 구성 요소 모두에 대해 작동한다는 것입니다.

React를 사용할 때 일반적으로 React.lazy 를 사용하지만 Next.js와 함께 Server-Side Rendering을 사용하는 경우에는 작동하지 않습니다. 운 좋게도 동일한 작업을 수행하는 dynamic 라는 Next.js 종속성이 있습니다.

Info: Dynamic import Next.js documentation

import dynamic from 'next/dynamic';

// Loading StickerForm component, showing spinner while fetching the component
// Use it like you're use to <StickerForm />
const StickerForm = dynamic(() => import('./StickerForm'), { loading: () => <Spinner /> });

위에서 사이트에서 내 양식을 로드하는 방법의 예를 볼 수 있습니다. 이 동적 가져오기만 구현하여 첫 번째 로드 JS 크기를 89kB로 줄였습니다.



프로젝트마다 동일한 최적화를 달성하기 어려울 수 있습니다. 따라서 페이지에 즉시 필요하지 않은 이러한 구성 요소 또는 라이브러리를 찾으십시오. 예를 들어 기본적으로 접힌 부분 아래에 로드되는 구성 요소에 사용할 수 있습니다.

행복한 코딩

최초 게시 날짜: https://www.eliostruyf.com/devhack-optimizing-initial-load-js-nextjs/