Rechart 라이브러리 성능개선 방법

0. 문제 상황 발생

mui-rechart 라이브러리 사용 시

백엔드 api 에서 데이터가 많아졌을 때, 프론트에서 렉걸리는 경우가 있다.

이게 50mb 넘긴 대용량일 때 모습이다.

흰 화면 떳다가 → 내부 모듈에서 로딩 후 저렇게 빽빽하게 나온다 ;-;

1. 원인 분석

api 불러오는 것은 빠름, rechart 라이브러리에 데이터 넣는 과정(내부 모듈에서 로딩) 에서 렉이 많이 걸리는 듯.

progress 를 적절히 넣기 전에 조금 더 빨리 데이터가 라이브러리에 적용이 될 수 있는 방법을 고민

2. 찾아본 해결 방법 나열

1. parsing false -> 데이터 준비 관련(확인 필요)
2. 데이터 정규화 -> 이 부분은 정렬된 데이터를 제공하는것 만으로도 충분함
3. 출력되는 데이터를 줄여라(Decimation)
4. 애니메이션 off
5. 최대 최소값을 설정
6. web worker를 사용(확인 필요)
7. 내장 컴포넌트 ->> Brush 사용하기

→ 요점은 결국, 출력되는 데이터의 갯수를 제한한다는 것이고, 우리가 해야하는 방향과는 맞지 않았다.

하지만 여기에서 No decimation으로 엄청 많은 데이터를 넣었을때 속도 이슈가 발생하지 않았다.(심지어 100만개의 point를 찍는데도 불구하고)

3. 문제 해결

소스를 확인해본 결과, 속도에 이슈를 발생시켰던 것은 data에서 borderWidth값과 radius값이었다.

위의 Data Decimation에 나와있는 것 처럼 borderWidth : 1과 radius : 0 을 추가하므로써 속도에 엄청난 개선이 되었다.

내장 컴포넌트를 추가하는 방법

그래도 데이터가 10000개 이상일 때 버벅거림은 여전했다..
다시 한 번 찾은 방법으로는 , rechart안에 있는 내장 컴포넌트를 사용하는 방법인데,

{data.length > 1000 && <Brush dataKey="name" height={20} startIndex={0} endIndex={1000} stroke="#8884d8" />}

이런식으로 데이터가 1000개 미만만 보이게끔 렌더링하면 속도가 미친듯이 빨라진다.

다음엔 web worker 사용법도 면밀히 알아보고 싶다.