번들 지도
webpack · esbuild · 무거운 경로 순위 · 중복 꾸러미 찾기
번들 지도
webpack stats.json 이나 esbuild metafile 을 넣으면 어디가 무거운지 넓이로 보여 주고, 두 번 들어간 꾸러미를 찾아 줍니다
무거운 곳
두 번 들어간 꾸러미
webpack stats.json 이나 esbuild metafile 을 넣으세요
webpack stats.json 이나 esbuild metafile 을 읽어 번들에서 누가 무거운지 폴더 나무와 넓이로 보여 줍니다. 같은 꾸러미가 두 번 들어간 자리도 찾아 줍니다.
이렇게도 부른다 — bundle · 번들크기 · treemap
쓰는 법
- stats.json 또는 metafile 붙여넣기 (형식은 알아서 알아봄)
- 넓이 그림에서 큰 칸부터 보기 — 칸 넓이가 곧 용량
- 무거운 경로 순위에서 줄일 곳 고르기
- 중복 꾸러미 목록 확인 — 번들이 갑자기 커지는 흔한 이유
다른 곳과 뭐가 다른가
- 파일이 서버로 가지 않습니다 — 브라우저 안에서 읽습니다.
- 두 형식을 「이름 + 바이트」로 줄여 같은 나무로 만듭니다 — 결과 보는 법이 한 가지입니다.
자주 묻는 질문
- 어떤 형식을 받나요?
- webpack stats.json(modules[])과 esbuild metafile(inputs/outputs) 둘 다 받습니다. 붙여넣으면 어느 쪽인지 알아서 알아봅니다.
- 왜 총합이 아니라 나무인가요?
- 번들이 커졌을 때 필요한 건 총합이 아니라 누가 먹었나이기 때문입니다. 수만 줄짜리 stats 는 눈으로 못 보니 폴더 나무로 접어 넓이로 보여 줍니다.
- 중복 꾸러미는 어떻게 찾나요?
- 같은 이름의 꾸러미가 서로 다른 경로(중첩된 node_modules)에서 들어온 자리를 모아 보여 줍니다.
다른 도구
기기 안에서만 넣은 내용은 브라우저 안에서만 처리되며 어디에도 저장·전송되지 않습니다.