Webpack bundle diet

Webpack bundle diet

webpack-bundle-analyze

• 기존 번들 분석을 위해 webpack-bundle-analyze를 사용하였다.

변경 전 bundle-analyze

• 메인 페이지 진입 시 Gzip size가 397.19kB인 것을 볼 수 있다.

변경 사항

• paper 라이브러리의 용량이 크다. 심지어 paper-full.js, paper-core.js 둘 다 사용하면서 용량을 많이 잡아먹는다. 하나만 쓸 수 있게 변경하였다.
• paper 라이브러리는 /puzzle, /puzzle/[id] 페이지에서만 사용하는데 모든 페이지에서 불러오므로 메인 페이지 진입 시 초기 렌더링 속도가 느려진다.
• paper 라이브러리를 사용하는 컴포넌트와 모달, 토스트 등과 같이 초기 렌더링에 필요 없는 컴포넌트를 dynamic import로 초기 렌더링 후에 불러오게 변경하였다.

변경 후 bundle-analyze

• 메인 페이지 진입 시 Gzip size가 187.95kB인 것을 볼 수 있다. 기존 대비 52.7%가 줄어들었다.