앞에서 OOM으로 인해 페이지가 새로고침 된다는 현상을 해결하는 중이었다고 했다.
하지만 힙 메모리의 사용량이 아직 해결되지 않아서 이어서 해결해야 했다.
[react, html] DOM 조작으로 인한 메모리 문제 해결
해결 과정
크롬의 메모리 탭에서는 3가지의 프로파일링 방식을 제공한다. 문의가 3번 들어왔는데 특정 동작을 했을 때 새로고침이 된다는 내용으로 동일했다.
그래서 동작을 재연하면서 타임라인의 할당 계측과 성능 탭을 사용해서 측정했다.
그러다 더 이상 눈에 띄는 게 없어 힙 스냅샷으로 측정을 해봤다.
측정해 봤더니 사용한 적 없는 mui 컴포넌트가 엄청 많은 거다. 세상에😱
- Default import vs Named import
mui는 import를 default 방식으로 해야 필요한 컴포넌트만 가져온다.
우리 프로젝트에 군데군데 named 방식을 사용하는 곳이 있었고 해결을 위해 babel 설정을 했으나 바로 해결되지 않았다.
- babel 설정 방법: mui - Minimizing bundle size
이때부터 추가로 고민을 했다. 현재 프로젝트 상황은
- 문제가 되는 컴포넌트들은 추후에
디자인 리뉴얼이 계획되어 있다.- ui 라이브러리를 교체했고, 새로 구현되는 컴포넌트는
shadcn으로 구현된다.(mui는 점차적으로 없애는 중)- 당장의 조치를 취해서 메모리 이슈 문의는 더 이상 발생하지 않고 있다. (근본적 문제 해결을 위해 작업중)
이 상황에서 디자인 작업을 위한 시간을 하루만 더 들이면 많은 부분을 한 번에 해결할 수 있을 것 같다는 판단이 들었다.
그래서 트리쉐이킹 설정을 더 찾기보다 mui를 덜어내는 방향으로 정했다.
해당 컴포넌트들 내부에 있던 모든 mui 코드를 shadcn을 사용하는 것으로 수정하고 불필요한 상태들을 정리했다.
비교
힙 스냅샷을 다시 측정해 보니 메모리를 차지하고 있던 mui 컴포넌트가 없어졌다.
- 수정전
- 수정후
JS 힙의 사용량이45.1MB -> 7.8MB까지 80% 감소했다.
