# bundle analyzer

chhw130

🔴 사용자가 상호작용하는 컴포넌트  앞서 살펴봤듯이 nestjs앱 초기 로드 시간이 오래 소요되는 page들이 존재했고 최적화가 필요했다. > > mypage 210kB로 큰 비중을 차지하고 있는 것을 확인할 수 있었다.  다음 코드에 보이는 modifyPassword와 modifyPick은 modal이다. 즉, 내가 진행중인 프로젝트에서 버튼을 눌러서 상호작용을 해야만 보이는 컴포넌트인 것이다. 이것을 필요할 때만 가져오도록 dynamic import를 적용하는 것이 현명하다.  다음과 같이 modal컴포넌트들을 dynamic import를 적용시켰고 build를 해보았다. > ![](https://velog.velcdn.com/imag

chhw130

🔴 Bundle Analyzer > > > nextJs앱에서 npm run build를 하게 되면 다음과 같이 크기를 알려주지만 정확히 어떤 것이 얼마나 크기를 차지하고 있는지 모른다. 이를 위해 Bundle Analyzer를 통해 알아봐 번들 크기를 줄일 필요가 있다. 🟠 설치 및 세팅 &nbsp &nbsp 위와 같이 설치를 시작한다. &nbsp 다음과 같이 next.config.js파일에서 세팅해준다. 그리고 &nbsp 다음과 같이 빌드를 실행하면 다음과 같이

april_5

목표 렌더링 최적화 애니메이션 최적화 (Reflow, Repaint) 로딩 성능 최적화 컴포넌트 Lazy Loading (Code Splitting) 컴포넌트 Preloading 이미지 Preloading 실습툴 크롬 Network 탭 크롬 Performance 탭 webpack-bundle-analyzer 성능 최적화 >실습할 사이트의 크롭 dev tool을 열고 Performance 탭에서 애니메이션 성능 측정하기 Reflow와 Repaint 애니메이션이 버벅이는 현상? 쟁크 현상 필요한 Frame을 모두 보여주지 못하고 유실되어 버벅이는 현상이 발생 쟁크 현상이 발생하는 이

muchogusto

Reference https://velog.io/@leehyunho2001/nextbundle-analyze

april_5

목표 로딩 성능 최적화 이미지 사이즈 최적화: 적절한 이미지 사이즈 찾기 code split: 효율적인 코드 분할. 언제 코드 분할 텍스트 압축: 리소스 다운받기 전 압축 ➔ 다운받기 전 리소스 줄여서 로딩 성능 최적화 렌더링 성능 최적화 bottleneck 코드 최적화: 병목현상 코드 찾아서 최적화 시키기 실습툴 크롬 Network 탭: 네트워크 리소스 정보 크롬 Performance 탭: 웹 페이지가 동작할 때 실행되는 모든 작업 표시 크롬 Audit 탭 (Light hous

_iieun

Bundle Analyzer를 돌려보고 Lodash가 이상한 모양새로 꽤 큰 사이즈로 자리 잡고 있다는 것을 알게 되었습니다. Gzipped size: 33.81KB Lodash 모듈 용량 최적화 방법 lodash가 번들을 크게 만드는 이유는 lodash가 CommonJS로 작성되어 있기 때문입니다. (CommonJS가 번들을 더 크게 만드는 이유 참고) lodash tree shaking 관련 검색을 해보니 2가지 정도 방법이 있었습니다. member style imports를 default style imports로 변경하기 lodash-es 사용하기 저는 이 중에서 member sty

hsk10271

⚠️ 정리한 내용은 오타나 잘못된 정보가 있을 수 있습니다. 댓글로 알려주시면 감사하겠습니다. 먼저 비드마켓 프로젝트를 진행하면서 우리 프로젝트를 빌드했을 때 파일들의 용량이 매우 큰 것을확인할 수 있었다. 번들 크기에 대해서 좀 더 자세히 확인해보기 위해서 bundle-analyzer를 적용해보았다. @next.bundle-analyzer 설치 및 적용 npm install @next/bundle-analzyser 또는 yarn add @next/bundle-analyer 명령어로 설치를 하고 next.config.js 파일에 다음과 같이 적용한다. 그 후 ANALYZE=true next build 명령어로 실행을 하면 client.html과 `serve

namtaehyun

지금까지 마트장보고 앱은 대부분 단방향으로 정보를 제공했고, 유저는 정보를 소비만 했습니다. 새로운 변화를 주고자 사장님이 직접 작성하는 생생마트통(선착순, 공동구매)을 개발하게 되었고, 사장님 앱도 같이 출시되었습니다. 이러한 과정속에 여러 패키지를 설치하게 되는데, 그 중에 비교적 큰 사이즈의 패키지를 최적화한 내용을 남겨보겠습니다. bundle analyzer https://github.com/vercel/next.js/tree/canary/packages/next-bundle-analyzer 설치 방법은 자료가 많기에 따로 정리하지는 않았습니다! ![](https://velog.velcdn.com/images/namtaehyun/post/2f11bc2b-2123-4d46-83d9-ad8b9