[Side Project] 포케허브

포케허브라는 사이드 프로젝트는 이미 배포를 한 상태이다.

리팩토링 및 피드백 받은 사항들을 개선 중에 있는 중..

뭐 이것저것 정리하다가 생각이든 @react-icons/all-files 사용이유

react-icons의 번들 사이즈가 너무 커서 번들 사이즈를 줄이기 위해 찾다가 해결책?으로 react-icons/all-files를 사용한다고 하였다.

물론 react-icons를 사용하면 편하기야 하겠으나, chunk크기가 무지막지..별의별 icon을 다 데리고 와버린다..
(빌드 시에 엄청난 크기의 chunk 파일 사이즈..)

그래서 찾아보았다!

react-icons에서는 @react-icons/all-files 라는 별도의 라이브러리를 제공한다.

@react-icons/all-files 라이브러리는 아이콘 별로 자바스크립트 파일을 별도로 가지고 있기 때문에,

빌드 시 트리쉐이킹 방식으로 더 적은 크기의 chunk를 만들 수 있다.

기존 react-icons는

import { IconName } from "react-icons/ai";

이런식으로 사용하는데 (아마 느낌상 react-icons/ai를 모두 가져오고 그 내부에 IconName이라는 icon을 가져오는거 같은?)

import { IoChevronBack } from '@react-icons/all-files/io5/IoChevronBack';

react-icons/all-files에서는 이렇게 사용한다. (이건 react-icons/all-files의 io5안에 있는 IoChevronBack만을 가져오는 느낌?)