[FE] Nextjs 번들 분석, Bundle Analyzer Stat, Parsed, Gzip 알아보기

번들

번들이란 javascript, css, 이미지 등을 하나 혹은 몇개 이상의 파일로 묶어서 브라우저가 이해하고 실행할 수 있게끔하는 결과물이다. 브라우저가 코드 하나씩, 이미지 하나씩 모두 호출해서 실행할 수는 없고, typescipt, JSX등의 파일은 읽을 수도 없기에 번들은 필수적이다.

 

 

번들 분석(Bundle Analyzer)

우리는 bundle-analyzer 라이브러리를 사용해서 무슨 번들이 있는지 한번에 시각적으로 알 수 있다. Nextjs의 경우 @next/bundle-analyzer 를 사용한다. 설치 방법은 여타 라이브러리와 비슷하다.

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

 

설치 후에 next.config.js 파일에 아래와 같이 추가해 주면 된다.

/** @type {import('next').NextConfig} */
const nextConfig = {}
 
const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
})
 
module.exports = withBundleAnalyzer(nextConfig)

 

그리고 실행 명령어에 아래처럼 추가해주면 아주 야무지게 결과물이 뽑힌다. 

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

 

 

결과물로는 위 번들이 가득한 3개의 웹페이가 열린다. 각각 server, edge, client. 이다. 

 

server

server는 노드 환경에서 실행되는 번들이다. 보통 page.tsx에서 실행되는 부분이 여기 속한다.

edge

엣지런타임 환경에서 실행되고, middleware.ts에서 사용되는 부분이 여기 속한다고 한다. 

client

client는 말 그대로 클라이언트 단, 다시 말해서 브라우저에서 실행되는 js이다. 클라이언트 측에 사용되는 번들 사이즈가 실제 성능에 직결되는것으로 보면된다.

 

---

 

근데 엣지 환경이 뭐지..? 잠깐만 확인해보자.

항목Node.js (Server)Edge Runtime

항목	Server	Edge Runtime
환경	Node.js	V8 + 제한된 JS API
파일 시스템	가능 (fs 등)	불가능
네트워크	자유롭게 호출 가능	제한적 (Fetch API 사용)
실행 위치	중앙 서버	전 세계 엣지 서버 (CDN 가까운 곳)
성능	일반적으로 느림 (중앙 서버)	매우 빠름, 지연 최소
용도	SSR, API routes	Middleware, 경량 API, 응답 지연 최소화

 

위에 말한 middleware.ts에서 사용된다고 생각하면 이해가 빠를 것 같다. 

---

 

이 3가지 페이지에서  3가지로 값으로 결과 값을 각각 보여주고 있다.

stat parsed Gzipped. 이들은 무슨 의미를 가질까?

 

Stat

웹펙이 번들링을 진행하기 전 크기이다. 그래서 보통 가장 큰 값 이겠다.

Parsed

번들링 후에 브라우저가 실행할 실제 크기라고 볼 수 있다.  성능에 가장 직접적인 영향을 미친다.

Gzipped

네트워크 전송 시에 실제로 다운로드되는 압축된 크기이다. 이는 네트워크 대역폭 사용량에 영향을 미친다. 그렇다보니 속도, 요금 그리고 기기의 메모리도 영향을 받을 수 있는 모바일 환경에서 중요시된다고 한다.

 

이미지로 정리해보자면 아래 처럼이겠다.

 

이 값 들을 줄이는게 번들을 최적화시키는 것이겠다.

이를 최적화 하는 방법은 아래와 같은 것들이 예시가 될 수 있겠다.

 

Stat 줄이기

1 불필요한 라이브러리 삭제

2 중복코드 삭제

 

Parsed 줄이기

1 dynamic import

2 lazy loading

 

Gzipped 줄이기

1 (......?? 아시는 분들이 있다면 댓글 좀...)

 

 

---

 

번들처리 레쯔고!