[FE] 번들 다이어트에 대한 타사 사례 조사

배경

 우리가 개발하고 있는 웹 프로젝트의 로드 속도가 느린 것 같다는 피드백을 듣고 개선 작업에 착수했다. 웹 로드 속도를 개선하기 위해 각자 서칭 후 팀원들과 여러 의견을 나누었고, 아키텍처 개선/인프라 개선/번들 최적화 등 다양한 아이디어가 나왔다. 그 중에서 우리는 번들 다이어트가 우리 프로젝트에서 빠르게 효과를 볼 수 있으면서 적용하기 쉬울거라 판단했다.

 

 이번 글은 타사의 번들 다이어트 사례를 조사하면서 알게 된 내용을 정리한 것이다. 번들 크기는 로드 속도에 직접적으로 영향을 끼치는 만큼 이미 여러 회사에서 해당 이슈를 해결하기 위해 여러 방법을 시도했고, 그 경험을 각종 컨퍼런스나 아티클로 공유하고 있어서 지식을 얻기 좋았다.

 

토스 - JavaScript Bundle Diet

 토스 슬래시 21에서 발표된 세션이다.

• node_modules의 중복 라이브러리 줄이기 ⇒ npm dedupe
• npm 보다 효율적인 yarn 사용 ⇒ yarn dedupe
• lodash 최적화 ⇒ 사용하는 것만 import 하도록 바벨 플러그인 사용 또는 필요한 코드만 직접 구현해서 쓰기도 함
• 번들포비아라는 플랫폼에서 라이브러리 정보 상세 확인
• Exports Analysis : 함수별로 얼마나 용량을 차지할지 미리 확인
• 사내 라이브러리 제작 : 트리셰이킹 ← 당장 우리한테는 필요없는 이야기
• 무거운 라이브러리의 영향 줄이기 : 몇 페이지에서만 라이브러리를 사용했지만, 모든 페이지에서 용량이 증가함 ⇒ next.js에서 처리해줌 또는 next/dynamic + webpack magic comment (prefetch 기능)

 

네이버 - 번들사이즈 최소화를 통한 웹 성능 개선

 네이버 컨퍼런스 Dan 24에서 발표된 세션이다.

• 마이크로 프론트엔드 아키텍처 사용 중
• 크롬 개발자 모드의 커버리지 : 사용 중인 코드를 파악
• 어떤 상황에서도 사용되지 않는 JS 리소스 식별
• 커버리지에 포함되지 않는 코드라도 특정 상황에서는 사용될 수 있음
• 사용되지 않는 JS 리소스가 번들에 포함되는 이유 분석
• 가능한 많은 코드를 삭제하여 꼭 필요한 코드만 포함되도록 설정하자!

1. 불필요한 polyfill 제거 ⇒ browserslist-config
2. svg와 lottie json 파일 내부의 data:image/png; 이미지를 sharp로 압축
   1. 코드에 숨어있는 이미지를 sharp를 활용하여 최대한 손실없이 압축
   2. 압축 프로세스를 eslint-plugin으로 자동화하여 DX 및 UX 향상
3. 불필요하게 포함된 라이브러리(vconsole)를 프로덕션에서 제거하기
4. 네이티브 기능 적극 활용하기
   1. html-entities ⇒ DomParser
   2. axios ⇒ native fetch
5. lodash를 자체 구현
   1. 트리쉐이킹 하는데 허들이 되는 구조
6. 상태 관리 라이브러리 자체 구현
7. npm 라이브러리의 효율적인 관리
   1. npm dedupe로 중복 라이브러리 제거하기
   2. npm 라이브러리 취약점 감지 및 최신화하기

 

정리

 타사의 사례를 찾아보고 다른 최적화 관련된 아티클도 여럿 읽으면서 드는 생각은 이제 번들 다이어트, 번들 최적화도 특별한 기술은 아니구나.. 싶었다. 웹의 역사가 깊은 만큼 최적화에 대한 방법론이나 최적화의 경험도 많이 공유되었고, 할 수 있는 방법도 거의 고정된 느낌이다. 그래도 자신의 상황, 능력을 인지하고 자신에게 맞는 방법을 찾아서 적용하는 것은 우리의 몫인 것 같다.

 

참조

• https://toss.im/slash-21/sessions/3-2

JavaScript Bundle Diet

• https://naver.me/52RYun71

플레이 네이버(PLAY NAVER)