[프로젝트] 다이나믹 임포트

함민혁·2024년 9월 17일

프로젝트

목록 보기

18/18

다이나믹 임포트 활용하기

취지

물론 내가 다이나믹 임포트 처리를 진행할 컴포넌트 크기가 미미해서, 번들사이즈에 크게 영향을 줄지는 의문이었다.
하지만 이것을 진행했던 취지는 번들 사이즈를 줄여본 경험을 해보고 싶어서였다.

들어가기 전에

hydrate라는 개념, 그리고 리엑트에서의 hydrate과 next.js에서의 hydrate의 차이를 명확히 알고 해당 작업을 진행해야 함 -> 링크

Dynamic Import는 첫 렌더링 시에 바로 보여줄 필요가 없는 요소들을 걷어내어 성능을 향상시키는 방식임.

내 프로젝트에서는 Footer에 적용할 예정이므로 Footer로 예를 들어보겠음

초기 Preredering 시 Footer에 대한 컴포넌트는 완전히 제외된 상태로 렌더링을 한 뒤, Client Side 단에서 실제 Footer 열게 되면, 서버 단에 해당 Footer 관련 Chunk File을 요청하여 별도 렌더링을 진행하게 됨

개념을 명확히 알면 여기까지는 그렇게 어려운 작업이 아님

작업 진행 순서

footer를 그냥 import
footer를 dynamic import
footer를 dynamic import + IntersectionObserver

ANALYZE=true yarn build로 번들사이즈를 체크
(scr/componets/Layout 내부에 Footer컴포넌트가 존재함)

const Footer = dynamic(() => import("@/components/Layout/Footer"), {
  ssr: false,
});

해당 경로의 번들사이즈가 15.35KB-> 11.41KB로 줄어든걸 확인할 수 있음.

마찬가지로 네트워크 창에서 확인해보면 아래 이미지와 같이 chunk파일이 분리된걸 확인할 수 있음.

하지만 내가 원하는 것은 사용자의 뷰포인트에 Footer가 등장하기 전까지 청크 파일이 생성되지 않는 것이였음

IntersectionObserver는 웹 API로, 요소가 뷰포트(브라우저의 가시 영역)와 교차하는 시점을 관찰하고 이를 기반으로 특정 작업을 수행

useEffect(() => {
  const footerPlaceholder = document.getElementById("footer-placeholder");

  if (footerPlaceholder) {
    const observer = new IntersectionObserver(
      (entries) => {
        if (entries[0].isIntersecting) {
          setLoadFooter(true);
          observer.disconnect();
        }
      },
      { rootMargin: "100px" } // 이 설정으로 footer가 뷰포트에 들어오기 100px 전에 로드됩니다.
    );

    observer.observe(footerPlaceholder);

    // 컴포넌트가 unmount될 때 observer 해제
    return () => observer.disconnect();
  }
}, []);

해당 코드를 통해 footer가 뷰포인트에 등장 전에는 chunk 파일을 요청하지 못하도록 제어함.