계기
frontend sync 시간에 자료 공유한 이후 진행하게 됨
번들
- 여러 개의 파일을 하나로 묶어서 처리하는 것을 의미
- javaScript 파일을 하나로 묶어서 생성되며,웹 어플리케이션에서 필요한 리소스를 단일 파일로 묶어 관리하고 전달하는 데 사용
웹 어플리케이션인 경우 HTML, CSS, JavaScript로 구성되는데 이들을 따로 모두 요청하게 되면 서버-클라이언트 요청 교환 횟수가 늘어나고 응답시간이 느려질 수 있는데 이런 필요한 파일들을 하나로 묶어 사용해 크기를 줄이고 요청 횟수를 줄인다.
뭐가 좋은가
- 자바스크립트와 React의 성능을 최적화 하는 방법 중 하나는 Webpack을 통해서 번들 된 자바스크립트 파일의 크기를 최대한 줄이는 것이다.
- 자바스크립트 줄이기가 Web Vital 수치에 크게 기여한다고 적었었는데, 이 Webpack을 설치한 것 만으로는 번들들을 잘 관리했다고 말할 수 없다고 한다.
- 그래서 우리는 Webpack의 여러 설정을 통해서 Bundle들을 이 Analyzer를 통하여 확인하고 줄여가보는 과정을 그려가야한다.
그래서 목표가 뭔가
- 파일 크기 줄이기 (파일의 크기가 작을수록 초기 페이지 로드 시간이 줄어든다고 하니 유효한 최적화 작업일지도..…. )
Webpack Plugin
- Webpack Analyzer Plugin : Bundle 들의 크기 및 구성이 어떻게 이루어져있는지 시각적으로 보여주는 Plugin
평균 전송 크기
- HTTP Archtive가 보여준 2023년 1월 기준 자바스크립트의 평균 전송 크기
- MEDIAN DESKTOP: 595.5 KB
- MEDIAN MOBILE : 547.6 KB
설정 추가
- next.js를 사용하고 있기 때문에 next.js에 맞게 라이브러리를 설치해주어야한다.
yarn add @next/bundle-analyzer -D - next.config.js 파일 내부에 bundle analyzer에 필요한 부분 추가
const withBundleAnalyzer = require('@next/bundle-analyzer')({ enabled: process.env.ANALYZE === 'true', openAnalyzer: false, }); const nextConfig = { reactStrictMode: false, swcMinify: true, }; module.exports = withBundleAnalyzer(nextConfig);
번들 사이즈 분석
사이즈가 유독 큰 패키지가 무엇인지 파악하고, 대체 혹은 제거할 수 있는 방법을 찾으면 번들 사이즈 최적화가 가능하다.
- brand A
- brand E
- brand G
- etc
동작
client.html
- 클라이언트 번들링 결과를 시각적으로 분석한 결과물
- 클라이언트는 사용자에게 전달되는 것이기 때문에 용량이 크면 느려진다.
edge.html
- 서버에서만 필요한 모듈의 번들링 결과를 시각적으로 분석한 결과물
nodejs.html
- 서버 사이드 렌더링 시 필요한 모듈의 번들링 결과를 시각적으로 분석한 결과물
번들 하나의 사이즈
- bundle 이름에 마우스를 올리면 해당 파일의 크기를 알 수 있는데 주목할 것은
Gzipped size로 실제 bundle의 크기를 말한다.- Start size
- 웹 브라우저가 앱을 실행하기 위해 다운로드하고 실행해야하는 js코드의 크기
- Parsed Size
- 웹 브라우저가 다운로드한 js를 parsing한 뒤의 크기다. 한마디로 js가 실행된 후 웹 브라이저에서 사용하는 메모리의 양을 말한다.
- Gzip
- 파일 압축에 쓰이는 응용 소프트웨어로써, HTML,CSS,JS 등을 압축하여 리소스를 받는 시간을 줄여주는 방식
- Gzip 알고리즘을 사용하여 압축된 js번들 크기를 의미한다.
- Start size
개선 로그 ing
- concatenated라고 되어 있는 것들은 용량을 줄이기 어렵다.
- 크기가 큰 박스로 되어 있는 것들은 꼭 필요한 것인지, 대체할 수 있는 것은 없는지 생각해보면 된다.
- package.json 버전만 다른 중복 패키지 / 혹은 사용하지않는 패키지 정리 우선적으로 필요
