주간회고 07/17 ~ 07/24

주간회고 07/17 ~ 07/24

회사

1. 번들사이즈 감소 작업

현재 진행중인 프로젝트의 번들사이즈를 체크해보다가, 줄일수 있는게 없는지 살펴보았다. 쉽게 번들 사이즈를 체크할 수 있는 툴이 cra-bundle-analyer를 통해 번들사이즈를 체크하고, 문제점을 찾기 시작했다.

우선 lodash 전체를 import하는 문제가 있어서, 각각의 필요한 함수만 import 하는식으로 변경했다.

// import _ from 'lodash' - before
import omit from 'lodash/omit' // - changed

다만, 연쇄적으로 처리하기 위한 chain 함수의 경우에는 직접 코드를 보고, 원래 기능에 버그가 생기지 않도록 일일이 수정해주는 번거로움이 있었다. PR을 올리면서 팀원들에게 필요한 함수만 가져다 쓰는 것으로 공유하였다.

또다른 방법으로는 처음에 필요하지 않는 몇몇 라이브러리를 번들 결과물에서 분리하는 작업을 했다. 내부에서 쓰이는 몇몇 컴포넌트들은 특정 페이지에서만 쓰이기 때문에, 처음부터 필요가 없다는 점을 확인하고 main 결과물에서 분리해냈다. framer-motion의 경우 낮은 버전을 써서 lazy load가 지원이 안되던 것을 버전업을 통해서 쉽게 해결하는 방법도 있다.

Before

After

결론

• 프로젝트 중간중간 번들 사이즈 체크를 할 필요가 있다. 날잡고 하려니 File change가 99개나 나왔다.
• PR을 좀 더 꼼꼼히 봤으면 미리 해결될 수 있지 않았을까?싶다. 또는 시작할 때 이러한 점을 공유하고 규칙으로 새우면 좋을것 같다.