@react-icons/all-files로 모듈 크기 개선

react-icons 라이브러리가 하나의 라이브러리 만으로 다양한 아이콘을 쉽고 빠르게 import 해올 수 있다는 장점이 있지만 라이브러리 전체를 추가할 경우 번들 크기가 커진다는 단점이 있다고 한다.

 

그래서 react-icons를 보다 더 효율적으로 사용할 수 있는 방법을 찾아보았다.

(과연 그 결과는..?)

 

모듈 크기 측정은 vscode의 Import Cost 라는 익스텐션을 사용했다.

 

 

---

 

 

react-icons 모듈 크기

비교를 위해 우선 기본적인 react-icons의 모듈 크기를 확인했다. 

 

react-icons는 한 파일 안에 모든 아이콘이 담겨있다.

react-icons/md/index.d.ts

 

 

---

 

 

@react-icons/all-files 모듈 크기

모든 아이콘을 담고 있는 파일 대신 개별 파일을 사용하기 위해 @react-icons/all-files 를 설치했다. 

 

all-files를 사용하는 경우 모듈 크기가 축소가 된다. (큰 차이는 아니지만)

 

왜냐하면 해당 파일은 단 하나의 아이콘에 대한 정보만 담고 있기 때문이다.

 

 

❌ 그러나 all-files를 사용할 수 없는 경우가 있다.

tb처럼 react-icons 라이브러리에는 있으나 @react-icons/all-files에는 없는 경우가 있기 때문이다. 

 

또한 같은 그룹에서 여러 개의 아이콘을 불러오는 경우 파일이 분리되어 있기 때문에 여러 개의 import문을 사용해야 한다는 불편함이 있다.

또한 import 문을 분리하여 오히려 모듈 크기의 합은 커진다는 문제점이 있다.

 

 

 

---

 

 

결론적으로

모듈의 크기가 다이나믹하게 축소되지는 않는다.

그러나 코드의 길이가 길어지고 여러 문제점이 발생하기 때문에 react-icons를 사용하는 것이 낫다고 판단했다.

npm remove @react-icons/all-files

goodbye~