Next.js 번들 사이즈 확인하기 - @next/bundle-analyzer 사용하기

@next/bundle-analyzer를 이용하여 번들 사이즈를 확인해보자!

설치

npm i @next/bundle-analyzer --save-dev

 

우선 @next/bundle-anlyzer를 설치해 보자. 개발할 때만 필요한 패키지이므로 뒤에 --save-dev를 붙여서 설치해 주자.

 

next.config.js 설정하기

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

...

const nextConfig = {
  reactStrictMode: true,
...
...
};

module.exports = withBundleAnalyzer(nextConfig);

위와 같이 next.config.js에 @next/bundle-analyzer를 사용할 수 있도록 설정해 주자. 

 

package.json

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

scripts에 위와 같이 설정해주자. 

 

번들 사이즈 확인하기

터미널에 npm run analyze를 동작시키면 다음과 같이 번들 사이즈를 시각적으로 알려주는 페이지가 열린다. 

해당 페이지를 통해 번들 사이즈를 확인하고 어떤 파일이 큰 용량을 차지하는지 알아낼 수 있다. 

 

 

---

↓ 성능 개선 관련 포스트 확인하기 ↓

 

Next.js 사이트 성능 관리 - next/dynamic 적용하기

Next.js 사이트 성능 관리 - next/dynamic 사용하기

 

Next.js 페이지 성능 개선 - svg sprites 적용하기

Next.js 페이지 성능 개선 - svg sprites 적용하기