[리액트] VSCode 익스텐션 추천 - 모듈 크기 알아보기(Import Cost)

 

 

자동완성 익스텐션 글에 이어 또 다른 유용한 익스텐션을 들고 왔습니다!

리액트 VSCode 자동완성 익스텐션 추천 (Auto Import, Code snippets 등)

 

---

- Import Cost

import 하려는 모듈의 크기를 알아볼 수 있는 익스텐션이다.

 

- 사용법

사용법은 아주 간단하다. 익스텐션 설치 후 다시 코드 파일로 돌아가 보면 크기가 표시되어 있다.

moment가 용량을 많이 차지하나보다.

 

참고로 본인이 만든 모듈은 계산이 되지 않고, npm 모듈만 측정해준다.

 

현재 개발 중인 웹에서 크롬 개발자 도구인 Lighthouse로 점수를 매겼는데 성능이 썩 좋은 편이 아니었다.

사용하지 않는 자바스크립트를 줄이라는 경고 메시지가 떠서 구글링 해보니.. 번들 사이즈를 최적화하는 게 답이었다.

필요 없는 코드를 줄이고 압축해나가는 과정에 유용한 익스텐션이라 생각한다.

 

+) 웹팩을 통해 번들링 된 js파일들을 볼 수 있는 bundle-analyzer도 있다.

CRA에서 eject 없이 webpack-bundle-analyzer 사용하기

 

++) moment는 한국어뿐만 아니라 다양한 locale이 있기 때문에 용량이 크다.

보통 하나의 언어만 사용하고 나머지는 불필요해서 웹팩을 통해 번들에서 제외시킨다!