📚 Reference

• 공식 문서 1
• 참고 자료 1
• npm 1

📜 Chapter

‣

@next/bundle-analyzer

• bundle-analyzer는 빌드된 파일을 트리맵 형식으로 종류와 크기를 효과적으로 보여주는 플러그인이다.
• Next.js에서 제공하는 bundle-analyzer를 사용하면 SSR시에 대한 번들까지 분석해준다.

설치

# npm
npm i @next/bundle-analyzer

# yarn
yarn add @next/bundle-analyzer

Custome webpack

• bundle-analyzer를 사용하기 위해서는 Webpack을 커스터마이징 해주어야한다.
• next는 기본적으로 Webpack을 포함하고 있기 때문에, React에서 Webpack 설정하듯이 하면 안된다.
• config를 통해 설정을 바꾸어주자.
• 프론트 서버 디렉터리에 next.config.js 를 생성한다.