Bundle diet

samankeyc·2022년 4월 10일
0

TIL

목록 보기
7/7

본 포스팅은 토스 개발자 컨퍼런스 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 받을 수 있음
profile
문제를 해결해야지, 문제있어요?

0개의 댓글