ahribori.com은 모든 자바스크립트 코드와 스타일시트(css, sass)가 webpack으로 번들링되어있는데 빌드를 하다가 문득 사이즈가 너무 커져있는 것을 발견했다. 라이브러리를 무분별하게 import해서 생긴 결과인 것 같다. 이 번들 파일의 사이즈가 1Mb를 넘어가는데 뭔가 줄일 수 있는 방법을 알아보다가 webpack에 webpack-bundle-analyzer라는 플러그인이 있는 것을 발견하였다.

먼저 webpack-bundle-analyzer를 npm으로 install 한다.

npm install --save-dev webpack-bundle-analyzer

그 다음은 webpack 설정파일에 다운받은 플러그인을 추가합니다. 시각화 웹 서비스를 띄울 Host와 Port도 설정해준다.

plugins: [		
        new BundleAnalyzerPlugin({
            analyzerHost: '127.0.0.1',
            analyzerPort: 8080
        })
	]

webpack을 실행시켜보면 설치한 플러그인이 bundle 파일을 분석해서 웹 화면으로 시각화하여 보여준다.

좌측 하단에 쓰지도 않는 locale.js가 무지막지하게 용량을 차지하고 있는 것을 발견.. moment.js를 통채로 import하면 저렇게 자동으로 locale.js까지 딸려서 번들링된다.. moment.js만 import되도록 변경한 후 다시 build해보면

locale.js가 제거되면서 용량이 100kb가량 줄어들었다.

다른 리소스들도 이 방법으로 잘 추려내면 용량을 많이 줄일 수 있을 것 같다.