First Load JS shared by all(번들 사이즈)를 줄이는 방법

안녕하세요:) 제가 적용했던 몇가지 방법을 알려드리자면 1. 번들 사이즈를 확인해서 잘 사용하지 않는 라이브러리 제거 또는 대체하기 next/bundle-analyzer라는 라이브러리를 사용하면 번들을 구성한 파일, 라이브러리의 세부 용량을 확인할 수 있습니다. 용량이 큰 라이브러리의 경우 사용하지 않으면 제거하고, 대체할 수 있다면 라이브러리를 사용하지 않고 직접 구현하여 용량을 줄일 수 있습니다. 저도 실무에서 pdf를 보여주는 뷰어 컴포넌트를 만들어야 했었는데 pdf를 보여주기 위해 사용하는 react-pdf의 용량이 너무 커서 iframe을 통해 직접 뷰어를 구현했던 경험이 있습니다. 큰 용량을 차지하지만 잘 사용하지 않는 라이브러리가 있다면 대체하는 것도 한가지 방법이 될 것 같아요. 2. import cost를 확인하여 라이브러리에서 필요한 코드만 가져오기 vscode를 사용중이시면 import cost라는 익스텐션을 통해 각 파일이 import하는 모듈의 사이즈를 확인할 수 있습니다. module의 사이즈가 크고 해당 모듈에서 사용하는 코드가 한정적이라면 직접 코드를 Import하는 습관을 들이면 평소에서 용량에 많은 리소스를 줄일 수 있습니다. 예를 들어 lodash를 사용할 경우 export default를 통해 lodash 모듈을 불러오면 71.5kb 이고 ex) import _ from 'lodash'; join 함수만 가져오면 720b입니다. ex) import join from 'lodash/join'; 요약하면 1. 현재 프로젝트의 번들을 구성하는 모듈의 사이즈를 확인 -> 불필요한 라이브러리는 삭제하고, 대체할 수 있으면 대체한다. 2. 평소에 번들 사이즈를 키우지 않는 코딩 습관을 기른다 -> import cost를 통한 비용 체크 더 좋은 방법을 알아내시면 답변으로 저에게도 공유해주세요~