본 포스팅은 토스 개발자 컨퍼런스 SLASH 21 중 이한님의 bundle diet를 요약했습니다
- npx nuxt build —analyze
- 라이브러리 중복 줄이기
- npm은 sember를 지킨다고 가정 (항상 잘 동작하는 것은 아님)
- npm dedupe (설치과정에서 중복된 라이브러리를 제거)
- yarn deduplicate 라이브러리 사용 (혹은 yarn dedupe)
- lodash의 경우 babel-plugin-lodash 를 사용해 필요한 기능만 import
- babel-plugin-transform-impots (lodash 이외 다른 플러그인)
- node.js와 브라우저 환경을 통일하기 위해 polyfill을 추가할 수 있음
- bundlephobia 사용하면 라이브러리 용량, 속도, deps 미리 확인할 수 있음
- tree-shaking 정적 분석을 통한 필요한 코드만 가져오는 기술
- 컴파일 툴 terser
- 타입스크립트에서는 pure-annotation을 지원해주지 않기 때문에 babel을 통해 컴파일 권장
- 무거운 라이브러리 영향 줄이기
- webpack dynamic import 사용하면 여유로운 시간에 미리 fetch 받을 수 있음