codedang
codedang copied to clipboard
skkuding
Bundle size 줄이기 위해 react-icons 대신 다른 라이브러리 사용
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와 같은 라이브러리를 사용하는 게 좋을 거 같아요.
참고 https://github.com/react-icons/react-icons/issues/786 https://github.com/react-icons/react-icons/issues/154
Validations
- [X] Follow our Code of Conduct
- [X] Read the Contributing Guidelines
- [X] Check that there isn't already an issue
react-icons 이야기는 아니긴 한데... MUI의 iconset이 SSR을 지원 안해서 timeout 떴다는 이야기가 많더라고요
- https://github.com/vercel/next.js/discussions/47237
- https://www.reddit.com/r/nextjs/comments/117t880/comment/jaavscr/?utm_source=share&utm_medium=web2x&context=3
https://nextjs.org/docs/app/api-reference/next-config-js/optimizePackageImports next.js에서는 lucide-react library를 많이 쓰는 것 같아서 다 바꿨는데 1B씩 정도밖에 차이가 안납니다! 그래서 찾아보니깐 next.js에서 react-icons 라이브러리는 기본으로 최적화하고 있었네요.. @dotoleeoak
일단 바꾸고 빌드하면 icon 관련 라이브러리가 큰 비중을 차지 하지 않아보이는데 아마 lucide-react는 그냥 js로 빌드하지 않는 게 아닐까 싶습니다!
Changed the connected Notion task status to not-started
