재테크 블로그 프로젝트 (9) - 리팩토링 [번들 사이즈 줄이기]

개요 

 

이전글에서 측정한 번들크기를 보고 여러 방법을 시도 후 얼만큼 번들크기를 감소시켰는지 확인해보자

 

번들 사이즈에 대해 검색하며 배운 방법들을 사용해보려 한다.

 

 

1.  불필요한 파일,코드 삭제

2. 코드 스플리팅

3.  미사용 라이브러리 의존성을 삭제 및 Third-Party 라이브러리 최소화 (가능하다면)

 

 

추가로 저번 시간에 활용하지 못한 방법중 하나가 cloc을 통해 코드의 줄 개수를 측정하는 것이다.

cloc : 코드 라인, 주석 라인, 빈 줄 등을 계산해주는 CLI 도구

cloc . // 프로젝트의 전체 코드 라인 수를 출력

 

물론, 적은양의 코드가 항상 옳다고는 할 수 없지만, 가독성과 로직이 유사하다면 아무래도 적은 양의 코드가 좋은 평가를 받는다.

 

cloc을 통한 코드, 파일 수의 비교와 저번 시간의 bundle-analyzer을 통해 전반적인 번들사이즈의 변화를 비교해보려고 한다.

 

현재 아무런 조치를 취하지 않은 경우  다음과 같이

 

file 24,000개, 공백 36만개, 주석 62만개 코드 총 340만개로 상당히 많은 것을 볼 수 있다.

 

 

불필요 파일, 코드 삭제

어떻게 보면 여러 방법중 제일 간단한게 아닐까 싶다. 여러 파일들을 톺아보며, 미처 지우지 못한 파일들을 수정,삭제하면 되니까.

 

1. 주가예측에서 사용하는 Advanced Charts 변경

 

기존, 모의투자와는 다르게 주가예측의 경우 전문성과 사용자를 위해 다양한 차트관련 툴을 제공하고자 도입했다.

 

현재, Advanced charts는 현재 서비스 종료후 저작권 문제로 인해 마침 삭제를 해야했다.

 

또한 AdvancedChart의 경우 npm과 같은 패키지 매니저로 설치하는 것이 아닌 라이브러리를 직접 넣어 사용하는 벤더링 방식으로 사용했다.

 

이것 때문인지는 몰라도 해당 차트 도입후 빌드가 느려짐을 체감했다.

 

쿨하게 해당 관련 라이브러리를 삭제하고 1100개 가량의 파일이 삭제되었다..

주가예측의 그래프의 경우 모의투자에서 사용하는 tradingview light version으로 변경했다.

 

2. 미사용, 불필요 의존성 삭제

 

프로젝트를 진행하며, 사용하지 않거나, 변경한 의존성의 경우 최대한 삭제하거나 팀원간의 코드리뷰를 통해 삭제하도록 했는데 그럼에도 누락된 잔여 의존성이 분명 있을거라 생각해 꼼꼼히 확인해봤다.

 

 

- slick -> swiper로 대체

slick의 경우 오래된 의존성이기도 하고, jquery를 peerDependncy로 가지기에 더 많은 리소스를 차지한다고 판단했다.

 

swiper로도 충분히 지수정보 무한 루프구현이 간단하게 구현이 가능해 변경했다.

오히려 한칸씩 회전 후 잠깐 주춤하는게 더 고급진 거 같아 마음에 든다

package.lock.json에 slick과 관련된 모든 코드 삭제

 

 

- dompurify 삭제

우리는 현재 Toast UI Editor를 통해 사용자들에게 html 정보를 보여주고 있다.

해당 에디터에선 기본적으로 보안 처리가 되어 있으므로 DOMPurify가 필수가 아니기도하고 해당 파트를 맡은 팀원이 해당 라이브러리를 설치 했으나 막상 컨텐츠를 렌더링하는 파트에선 해당 라이브러리를 사용하지 않아 삭제했다.

 

 

- uuid, typewritter-effect, react-syntax-highlighter 삭제 (미사용)

아마 초기에 lint에서 반복요소에 고유한 key값을 넣으라는 경고 때문에 설치한 것 같은데 더는 사용하지 않는다. 과감하게 삭제

typewriter-effect의 경우 초기 랜딩페이지 스타일링 때 도입 고려했으나 사용하지 않아 삭제한다.

react-syntax-highlighter의 경우 블로그 글 디테일에서 코드를 작성한 경우 문법에 따른 강조를 위해 도입했으나 사용하지 않는 것 같다 삭제!

 

 

-  husky, apex-chart 삭제 (미사용)

husky는 처음 적용한 나의경우 잘 적용됐으나 다른 팀원의 경우 작동하지 않아 개발중 나만 사용했다가 지금은 사용하지 않아 삭제

apex-chart의 경우 초기에 고려했던 그래프 라이브러리로 캔들그래프를 구현하는데 부족한 속성 및 좌우 스크롤 불가로 인해 안쓰게 되었다.

 

의존성 정리 중 문제 발생

 

경고이기 때문에 기능구현엔 문제가 없겠지만 보니까 메모리 누수와 같은 문제가 있다고 하니 해결해보자.

대부분 버전 지원 문제로 요구하는 버전으로 새롭게 의존성을 변경해 설치한다.

의존성 버전을 경고 내용대로 변경 후, npm i을 해보니 어떤 경고문도 없이 깔끔한 문구가 출력된다.

 

 

3. 사용되지 않는 타입, 상수, 사진 삭제

 

타입 파일 및 상수 파일의 경우 개발중에 있어 서로 같은 타입 또는 상수를 다른 이름으로 중복선언하게 되곤한다.

개발 초기에는 비교적 서로 잘 발견하고 풀,머지를 번갈아가며 통합하는데 뒤로 갈수록 중복 선언되는 요소들이 있어 이를 개선하고자 했다.

 

 

5단계로 쪼개서 더는 사용하지 않는 사진, 타입, 상수코드를 삭제했다.

타일링 코드 중 자주 사용되는 flex flex-col-center와 같은 코드는 tailwind 사용자 정의 레이어로 선언했다.

 

 

결론

중간점검

이전(좌)보다 확실히 많이 줄은 것을 볼 수 있다. 이렇게나 안쓰는 코드가 많았나하고 충격을 받았다. 

 

다음글에선 이 글에서 미처 하지 못한 조치를 취해보려한다. (코드 스플리팅,  Third-Party 라이브러리 최소화 등...)