ChartJS를 그냥 사용하면 안되는 이유 (feat. momentJS)

우아한 테크코스의 프로젝트를 진행하면서 차트 UI의 필요성을 느꼈다.

직접 구현하자니 마감 기한내에 예쁜 UI가 나올지 미지수였고, 현재 컴포넌트 구조상 차트가 재사용될곳도 없었기 때문에 빠르게 chartjs를 사용하여 프로토타입을 만들어내었다.

 

chartjs가 차트를 다 그려줘서 사실 너무 편했다.

 

하지만 이것은 큰 실수였다.

 

chartjs이전에 달력 UI를 구현하면서 momentjs를 사용했는데 이 라이브러리는 import cost가 289kb로 굉장히 높다.

번들 포비아에서 분석해보면 비명을 지르더라.

 

그래서 dayjs로 바꾸니 7kb로 확 줄었다.

사용법이 굉장히 비슷하고, 차이점은 불변성 유지의 차이점일텐데 momentJS를 쓸 때도 불변성이 유지되는 코드였어서 사실 이름만 바꾸는 수준으로 쉽게 대체가 되었다.

 

근데 갑자기 번들 사이즈가 7kb정도 높아지는 현상을 목격했다.

 

momentJS를 제거하고, 더 가벼운 7kb짜리 Dayjs를 깔았는데 이 무슨 말도안되는 일이 일어났을까 고민을 했고

yarn.lock도 까보고 번들 analyzer까지 돌려본 결과

 

chartjs가 momentjs를 쓰고 있었다.

 

package.json 상에서는 momentjs가 없었으나 chartjs가 momentjs를 포함하고 있었다.

 

그래서 dayJS를 쓰니까, 오히려 용량만 증가한 꼴이 되었던 것이다.

 

그래서 라이브러리가 유명하다고 쉽게 믿고 쓰면안되고, 최대한 자바스크립트로 손수 구현해서 써서, 라이브러리간이 의존성을 줄여야겠다는 생각을 했다.

 

이거 외에도 라이브러리를 무턱대고 찍어먹었다가. 성능이 저하되는 뒤통수를 맞아서.. 

이제는 할 수 있는한 모든 라이브러리를 내 스스로 만들어 써야겠다. (할 수 있는한!)