문제점
yarn start로 배포 버전 프로젝트를 실행하면 다음과 같이 번들링 사이즈가 권장 사이즈를 초과했다는 경고가 뜬다:
문제 해결 전략
- 웹팩 번들 분석 도구를 설치해서 번들링 사이즈가 무거워진 이유를 분석한다.
- 웹팩 설정 파일에서 최적화 옵션을 적용한다.
문제 해결 과정
웹팩 번들 분석 도구 설치
웹팩 번들 분석 도구를 설치한다:
yarn add -D webpack-bundle-analyzer
번들 분석 도구를 사용하기 위해 웹팩 설정 파일을 수정한다:
webpack.config.js:// ... const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer'); // ... module.exports = (webpackEnv) => { const isEnvDevelopment = !!webpackEnv.development; const isEnvProduction = !!webpackEnv.production; return { // ... plugins: [ // ... new BundleAnalyzerPlugin({ analyzerMode: 'static', // 번들 보고서를 정적 파일로 생성한다 openAnalyzer: false, // 보고서를 브라우저에서 연다 generateStatsFile: true, // 웹팩 통계 JSON 파일을 배포 폴더에 생성한다 statsFilename: 'bundleStats.json', // 웹팩 통계 JSON 파일의 이름을 설정한다 }), ] } }
번들 분석 플러그인에 위와 같은 옵션을 넣은 이유는 다음과 같다:
- 번들 분석 플러그인은 빌드(
yarn build) 명령어를 실행하면 동작하는데, 번들 분석 플러그인 옵션의 기본값은 브라우저에서 보고서를 보여주도록 되어 있다.
- 즉 빌드 명령어를 실행할 때마다 무조건 브라우저에서 번들 보고서를 보여주게 되므로 보고서를 보고 싶지 않을 때도 봐야 하는 불편함이 있다.
- 따라서 번들 보고서는 빌드할 때마다가 아니라 원하는 시점에만 볼 수 있도록 분리하기 위해 위 옵션을 넣어준다.
번들 보고서를 브라우저에서 보는 NPM 스크립트 추가:
package.json{ "scripts": [ "build:report": "webpack build --mode=production && webpack-bundle-analyzer --port 9090 dist/bundleStats.json", ] }
번들링 보고서 분석
보고서 생성 명령어를 실행하면 브라우저에서 보고서가 열린다:
yarn build:report
사이즈에 대한 개념은 다음과 같다:
- Stat size: 최적화(ex. minification) 되기 전의 번들 사이즈
- Parsed size: 최적화 이후 번들 사이즈
- Gzipped size: 최적화와 gzip을 거친 후 번들 사이즈 (네트워크에서 로드될 때 사이즈)
실제 배포 버전 서버를 실행한 결과:
main.bundle.js: 153KB
Q. 보고서에서는 Gzipped size가 105.79KB였는데 실제 네트워크 분석에서는 153KB라고 한다. 어디서 이런 차이가 나는 걸까?
웹팩 번들 최적화
웹팩 공식 문서에 가보면 최적화 옵션이 상당히 많다:
대략적으로 살펴보니 코드 스플릿팅을 통해 엔트리를 여러 개 나눠서 브라우저에서 동시에 여러 파일을 받게 만들어서 브라우저 다운로드 속도를 높이는 방법도 있고 여러 가지 다양했다. 우선 팀원 모두 최적화 방법에 대해서 잘 모르는 상태라 이것저것 막 써보기 보다는 학습하고 나서 논의하는 게 좋겠다고 생각했다.
See also
- webpack-bundle-analyzer: 웹팩 번들 분석 도구
- Roseline - 리액트 번들 사이즈 최적화: 보고서 사이즈 개념 참조