[next.js] webpack-bundle-analyzer로 번들 파악하기

webpack-bundle-analyzer는 번들 파일이 어떻게 구성되어있는지 파악하게 해주는 시각화 도구이다.

yarn add webpack-bundle-analyzer

next.config.mjs 혹은 next.config.js에 bundle-analyzer를 포함시켜서 빌드하고, 빌드가 완료되었을때 시각화 자료를 보여주는 편리한 도구이다.

HOC(High Order Component) 방식으로 nextConfig를 묶어주면 설정이 완료된다.

설정방법

import bundleAnalyzer from "@next/bundle-analyzer";

const withBundleAnalyzer = bundleAnalyzer({
  enabled: true,
});

const nextConfig = {
  ...
};

export default withBundleAnalyzer(nextConfig);

빌드하면 이와같이 analyze 폴더에 client.html, edge.html, nodejs.html이 각각 생성된다.

client.html

• 클라이언트 번들링 결과를 시각적으로 분석한 결과물

edge.html

• 서버에서만 필요한 모듈의 번들링 결과를 시각적으로 분석한 결과물

nodejs.html

• SSR 시, 필요한 모듈의 번들링 결과를 시각적으로 분석한 결과물

시각화 예시

프로젝트의 client.html의 번들링 결과물을 이와같이 시각적으로 보여준다.

번들 최적화 방안

시각화 자료를 참고해서, 아예 애플리케이션에 필요 없을 수도 있고 어떤 것들은 빌드 시점에 필요없음에도 불필요하게 포함되어있을 가능성이 있으므로 패키지가 사용된 컴포넌트에서 최적화 방안을 모색하여 번들 사이즈를 줄여야한다.

사용하지 않는 패키지 제거

• 프로젝트에서 사용하지 않는데 설치되어있는 패키지가 있다면 제거한다.

다이나믹 import 사용

• 다이나믹 import를 사용해서 필요한 시점에만 모듈을 로드한다.

// 컴포넌트가 필요할 때 다이나믹 로드하기
import dynamic from 'next/dynamic';

const DynamicComponent = dynamic(() => import('../components/DynamicComponent'), {
  ssr: false, // 서버사이드 렌더링 비활성화 (필요시 설정하면 됨)
});

export default function Home() {
  return (
    <div>
      ...
      <DynamicComponent />
    </div>
  );
}