[React] React-icons (The code generator has deoptimised - index.esm.js as it exceeds the max of 500kb) 이슈 해결하기

 react 개발을 진행하면서 webpack에서 빌드를 할 때, 계속 아래와 같은 오류가 발생해서 이를 해결해보고자 했다. 오류에 따르면 뭔가 최적화가 안되고 있고, react-icon 주에서 fa와 md에서 최대 값인 500kb를 초과하고 있다는 내용이었다.

[BABEL] Note: The code generator has deoptimised the styling of .. react-icons/fa/index.esm.js as it exceeds the max of 500KB.
[BABEL] Note: The code generator has deoptimised the styling of .. react-icons/md/index.esm.js as it exceeds the max of 500KB.

 그래서 일단, BundleAnalyzerPlugin이라는 플러그인을 설치해서 이 사태를 한번 판단해보기로 했다. BundleAnalyzerPlugin은 webpack에서 지원하는 플러그인으로 말 뜻 그대로 번들 사이즈 분석할 수 있는 UI를 제공하는 플러그인이다.

 실행을 시켜봤는데 음.. 딱 봐도 react-icons 밑에 md와 fa의 index.esm.js가 아주 많은 부분을 차지하는 것으로 보아 뭔가 문제가 있어 보인다. 해결하기 위해 열심히 구글링을 하다가 아래의 링크를 찾게 되었다. 위에도 답변이 상당히 많은데, 이것저것 시도를 해보다가 나에게 적용이 되는 답변은 아래 링크에 해당하는 답변이었다.

https://github.com/react-icons/react-icons/issues/154#issuecomment-895976123

React Icons Imports everything even when included 2 or 3 icons · Issue #154 · react-icons/react-icons

 먼저 내 소스 코드의 구조를 보면 이런 식의 구조인데, 이 구조가 성능적으로는 좋지 않은가 보다.. 사실 이유는 잘 모르겠다..

이 글에 따르면, @react-icons/all-files를 설치하고 개별 아이콘을 import 하는 방식을 따르라고 되어있다.

import {
  FaUser,
  FaGithub,
  FaUniversity,
  FaBirthdayCake,
  FaClipboardList,
} from 'react-icons/fa';
import { MdEmail } from 'react-icons/md';

 해당 방식을 적용하면 아래와 같다.

import { FaUser } from '@react-icons/all-files/fa/FaUser';
import { FaGithub } from '@react-icons/all-files/fa/FaGithub';
import { FaBirthdayCake } from '@react-icons/all-files/fa/FaBirthdayCake';
import { FaUniversity } from '@react-icons/all-files/fa/FaUniversity';
import { FaClipboardList } from '@react-icons/all-files/fa/FaClipboardList';
import { MdEmail } from '@react-icons/all-files/md/MdEmail';

 이제 다시 build를 진행해서 결과를 한번 보겠다. 오류 메시지는 말끔하게 사라졌고, bundle 사이즈가 말도 안 되게 줄어들었다!