[NextJS] 번들 분석도구 설정 및 사용법

@next/bundle-analyzerJavaScript 모듈의 크기를 관리하는 데 도움이 되는 Next.js용 플러그인이다. 각 모듈의 크기와 해당 종속성을 시각적으로 확인할 수 있게 도와준다. 이 정보를 사용하여 불필요하게 큰 종속성을 제거하거나, 코드를 분할하거나, 필요할 때 일부 부분만 로드하여 클라이언트로 전송되는 데이터의 양을 줄일 수 있다.

 

설치

다음 명령을 실행하여 플러그인을 설치한다.

npm i @next/bundle-analyzer
# or
yarn add @next/bundle-analyzer
# or
pnpm add @next/bundle-analyzer

 

 

그 후 next.config.js 파일로 들어가서, 다음과 같이 번들 분석도구를 사용토록 셋팅한다.

const withBundleAnalyzer = require('@next/bundle-analyzer')({
        enabled: process.env.ANALYZE === 'true',
        }
) 

/** @type {import('next').NextConfig} */

const nextConfig = {} // 별도의 구성옵션

module.exports = withBundleAnalyzer(nextConfig)

 

 

분석실행

 

위 설정 까지 끝냈으면,  다음 명령을 실행 한다.

ANALYZE=true npm run build
# or
ANALYZE=true yarn build
# or
ANALYZE=true pnpm build

 

이 때 명령어를 터미널에서 직접 실행하고자 하는 경우에는 다음과 같이 입력하면 된다. 이 때 주의할 점은 윈도우 환경의 경우 powershell 에서는 커맨드를 인식하지 못하므로, git bash 에서 입력해주어야 한다.

 

 

 

자주 사용해야 하거나, 일일이 커맨드를 작성하기 귀찮다면, 다음과 같이 package.json 에서 스크립트에 명령어를 등록하여 사용하는 것도 가능하다. 이렇게 되면 터미널에 npm run analze 라고 입력하면 위와 동일한 동작을 수행한다.

"scripts": {
	...
	"analyze": "ANALYZE=true next build"
},

 

 

 

분석 실행 결과

위 커맨드 입력하게 되면, 두 개의 브라우저 창이 생성된다. 각각 클라이언트 사이드에서의 번들 분석과 서버 사이트에서의 번들 분석에 해당한다. 아래 결과를 바탕으로 next 에서 최적화를 제대로 해주지 못한 부분이나, 코드 병목이 발생하는 모듈에 대한 정보를 파악할 수 있고, 이를 토대로 최적화를 실시하면 된다.

 

클라이언트 사이드 번들 분석 결과

 

 

서버 사이드 번들 분석 결과