Portfolio

문제점 문제 해결 전략 문제 해결 과정 웹팩 번들 분석 도구 설치 번들링 보고서 분석 웹팩 번들 최적화 See also

문제점

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 파일의 이름을 설정한다
      }),
    ]
  }
}

new BundleAnalyzerPlugin({ options }) 참조

번들 분석 플러그인에 위와 같은 옵션을 넣은 이유는 다음과 같다:

번들 분석 플러그인은 빌드(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라고 한다. 어디서 이런 차이가 나는 걸까?

웹팩 번들 최적화

웹팩 공식 문서에 가보면 최적화 옵션이 상당히 많다:

대략적으로 살펴보니 코드 스플릿팅을 통해 엔트리를 여러 개 나눠서 브라우저에서 동시에 여러 파일을 받게 만들어서 브라우저 다운로드 속도를 높이는 방법도 있고 여러 가지 다양했다. 우선 팀원 모두 최적화 방법에 대해서 잘 모르는 상태라 이것저것 막 써보기 보다는 학습하고 나서 논의하는 게 좋겠다고 생각했다.

번들 사이즈 최적화 1편: 번들 사이즈 분석 도구 설치하기

문제점

문제 해결 전략

문제 해결 과정

웹팩 번들 분석 도구 설치

번들링 보고서 분석

웹팩 번들 최적화

See also