Bundle size 줄이기 위해 react-icons 대신 다른 라이브러리 사용

[dotoleeoak]

Describe the problem and solution

아래 그림처럼 빌드 후 bundle 사이즈를 분석했을 때 react-icons가 높은 비중을 차지하는 걸 볼 수 있습니다.
이 때문에 아이콘이 적용된 페이지는 로딩이 다른 페이지에 비해 느려집니다.
Next.js의 빌드 결과에 따르면 일반 페이지는 JS가 85.2 kB, 아이콘이 있는 페이지는 374 kB입니다.

react-icons에서 자체적으로 tree-shaking을 지원하지 않기 때문인데,
해결 방법이 없진 않지만 이 방법을 쓰면 설치해야하는 react-icons의 크기가 늘어나 설치가 오래 걸리는 단점이 있습니다.
tree-shaking을 더 잘 지원하는, Vue와 사용하던 unplugin-icons와 같은 라이브러리를 사용하는 게 좋을 거 같아요.

참고
react-icons/react-icons#786
react-icons/react-icons#154

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines
• Check that there isn't already an issue

[dotoleeoak]

react-icons 이야기는 아니긴 한데... MUI의 iconset이 SSR을 지원 안해서 timeout 떴다는 이야기가 많더라고요

• API routes and getServerSideProps timeout on production (Vercel) vercel/next.js#47237
• https://www.reddit.com/r/nextjs/comments/117t880/comment/jaavscr/?utm_source=share&utm_medium=web2x&context=3

[dayongkr]

https://nextjs.org/docs/app/api-reference/next-config-js/optimizePackageImports
next.js에서는 lucide-react library를 많이 쓰는 것 같아서 다 바꿨는데 1B씩 정도밖에 차이가 안납니다!
그래서 찾아보니깐 next.js에서 react-icons 라이브러리는 기본으로 최적화하고 있었네요.. @dotoleeoak

[dayongkr]

적용 후 빌드 로그 캡처 사진입니다!

[dayongkr]

일단 바꾸고 빌드하면 icon 관련 라이브러리가 큰 비중을 차지 하지 않아보이는데 아마 lucide-react는 그냥 js로 빌드하지 않는 게 아닐까 싶습니다!