앞서 웹 성능 개선 - 이미지편(1MB에서 10KB가 되기까지) 글을 작성을 마치고 imagemin이라는 새로운 라이브러리를 알게 됐다. 살펴보니 괜찮아 보여서 이걸 알았다면 먼저 써봤을 텐 데라는 생각이 들었다. 그렇다면 처음부터 라이브러리가 필요할 때나 사용하기 전, 라이브러리 선택에 도움이 되는 건 없을까 싶어서 찾아봤다. 원래 라이브러리 선택은 개발 환경과 운영 상황에 따라 달라지는 거라곤 하지만, 나처럼 개발이라곤 쥐뿔도 모르는 뽀시래기들에게 그나마 선택 장애를 줄여줄 수 있지 않을까 싶어 공유한다.
세상엔 역시 있을 것 같다고 생각하면 다 있다. npm trends 라는 사이트가 나름 요구사항을 충족하고 있었다. npm에 배포된 라이브러리들의 기간별 다운로드 추이를 그래프로 쉽게 비교해 볼 수 있다. 그리고 starts, issues, version, updated, created, size까지 표로 한눈에 볼 수 있어서 딱이다.
npm trends: Compare NPM package downloads
Which NPM package should you use? Compare packages download stats, bundle sizes, github stars and more. Spot trends, pick the winner.
npmtrends.com
하나의 라이브러리를 입력하면 연관검색어를 확인할 수 있어서 더 유용하다. 예를 들어 imagemin이라는 키워드를 입력하면 아래 처럼 옆으로 연관검색어가 보인다.
related searches라는 항목도 있어서 요긴하긴 한 거 같다. 카테고리화 되어 있다면 좀 더 보기 수월하지 않을까 싶긴 하다.
아래는 이미지 압축 라이브러리 몇 개를 비교해 본 결과이다.
내가 사용한 browser-image-compression 라이브러리는 imagemin에 비하면 한참 아래에 있는 걸 볼 수 있다. 기능적으로 요구사항을 충족하기 때문에 당장 변경할 생각은 없지만, 다른 것도 알고 있으면 더 좋지 않나 싶다.
살펴보면 imagemin도 괜찮은데 sharp라는 라이브러리가 꾸준히 치고 올라오는 것 같다. sharp의 output 옵션 중에 webp도 있는 걸 보니 다음엔 sharp를 한 번 써보는 것도 좋을 것 같다.
'개발 > Etc' 카테고리의 다른 글
| 웹 성능 개선 - 폰트편 (0) | 2023.01.12 |
|---|---|
| Cumulative Layout Shift(누적 레이아웃 이동, CLS) (0) | 2023.01.11 |
| 웹 성능 개선 - 이미지 lazy loading(리액트) (0) | 2023.01.10 |
| 웹 성능 개선 - javascript편 (0) | 2023.01.09 |
| 웹 성능 개선 - 이미지편(1MB에서 10KB가 되기까지) (0) | 2023.01.08 |