bundleAnalyzer 이용해 번들링 사이즈 줄이기

번들링

사용자에게 웹 어플리케이션을 제공하기 위해 여러 코드와 프로그램들을 묶는 행위를 번들링이라 한다.

bundleAnalyzer

npm run build 의 결과물로 번들링된 파일을 분석해 어떤 요소가 어떤 용량을 차지하는지 보여주는 모듈이다. 번들의 사이즈가 크면 첫 로딩이 길어지므로 불필요한 요소는 제거해서 번들링 하는것이 좋다.

웹팩 설정을 통해 compressPlugin 적용하기

웹팩 설정을 통해 compresion-webpack-plugin을 적용해준다.(웹팩에 이미 내장되어 있음)
compresion webpack plugin은 빌드 시 번들링 파일을 gzip으로 압축해 파일 용량을 대폭 줄여준다. 대부분의 브라우저는 번들링 파일이 gzip으로 압축돼 있어도, 압축을 해제해서 실행해주는 기능을 가지고 있기 때문에 gzip으로 압축을 해서 사용해도 문제가 없다.

적용하는 방법은 compress 속성을 true로 설명하면 된다.

또한 bundleAnalyzer를 사용할 수 있도록 추가적인 설정을 해주면 코드는 다음과 같다.

next.confing.js

const withBundleAnaylzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
});

module.exports = withBundleAnaylzer({
  compress: true, // compressPlugin 적용
  webpack(config, { webpack }) {
    const prod = process.env.NODE_ENV === 'production';
    const plugins = [
      ...config.plugins,
      new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /^\.\/ko$/),
    ];
    return {
      ...config,
      mode: prod ? 'production' : 'development',
      devtool: prod ? 'hidden-source-map' : 'eval',
      plugins,
    };
  },
});

npm i cross-env

cross-env를 설치하고 script 부분의 build 명령어를 수정한다.

...
"build" : "ANALYZE=true NODE_ENV=production next build"
...

빌드를 실행하면 시각적으로 모듈이 차이하는 용량을 확인할 수 있다.
모듈의 구성을 확인하고 필요없는 모듈은 삭제해서 용량을 줄이고 번들링을 할 수 있다.