원인 찾기

• Webpack Analyse
• Webpack Visualizer
• Webpack Bundle Analyzer (추천)

라이브러리 사용시 문제

• 라이브러리간 의존성 때문에 무거워지는 node_modules
  • 웹팩과 npm은 의존성 문제가 생기면 그냥 모두 다 받아서 버전마다 쓰게 설계 되어있다
  • npm 은 라이브러리들이 시멘틱 버전인 semver를 지킨다고 가정해서 해결하려고 한다
    • 둘 중더 높은 버전을 받아 중복 라이브러리를 준다
  • 이게 항상 잘되는 건 아니라서 npm dedupe 명령어를 쓰면 중복 라이브러리를 더 잘 통합시킨다
• polyfill 사용 주의
  • 가벼운 라이브러리를 썼는데 polyfill이 추가되서 더 느려지는 경우도있다
  • 명시적으로 끄거나 확인해주는 라이브러리 사용 필요
• Bundle phobia
  • 번들 크기, 의존 라이브러리 미리 파악 가능
    • 라이브러리가 크더라도 이미 겹치는 라이브러리가 많다면 용량 변화 미미할 것
  • exports analysis : 트리 쉐이킹 되었을때 얼마나 줄지 알 수 있다

트리쉐이킹 활용하기

• 트리 쉐이킹의 어려움
  • 사이드 이펙트가 없을 때만 제거 가능
    • 제거시에 동작이 달라지는 경우
• 웹팩은 롤업에 비해서 사이드 이펙트 판단을 잘못한다
• 라이브러리를 만든다면 웹팩에게 package.json 의 side effects 항목에 명시적으로 사이드 이펙트 있는 라이브러리를 알려줘야한다
  • sideeffects가 있을때만 트리쉐이킹을 시도한다
• preserveModules : false라서 한파일로 나오는경우, 사이드 이펙트 있는 파일 껴있으면 트리쉐이킹 시도 안한다, true 라서 여러 파일로 나온다면 일부만 실패해서 좀더 나은 트리쉐이킹 가능
• terser
• 가급적 바벨을 이용해서 TS 컴파일 추천, pure annotation 지원을 TS 컴파일러는 안한다

토스ㅣSLASH 21 - JavaScript Bundle Diet