번들최적화 / 렌더링최적화

😲 번들최적화

번들러란?

번들러란 하나의 파일에서 연결하고있는 무수히 많은 파일들을 하나로 묶어주어 한개의 파일로 새롭게 만드는 것을 의미한다. 번들러의 대표적인 예로 webpack이 있다.

왜 필요한가?

예전에는 스크립트 태그로 분리된 js파일을 html에 로드했다. 이 방법은 의존성있는 코드 사이에서 순서를 보장하기 어려웠고, 일부 문제로 전체를 실행하지 못할 때도 있었다. 또한 웹페이지를 접속했을 때 여러번의 네트워크 통신을 하게되면서 비효율적이었다. 그렇기때문에 하나의 큰 js파일로 만들어주어야한다.

왜 webpack 인가?

현재 webpack은 설정파일없이 빌드가 가능한 버전으로 업그레이드되었고, webpack을 사용하는 이유는 번들을 통한 성능최적화(로딩 속도)라는 목적이 있다. 다만 초기 로딩속도가 길어질 수도 있지만, 청크, 캐시, 코드 스플리팅(필요한 모듈만 로드) 개념들을 도입하면서 문제들을 해결하고 있다. Webpack을 사용하여 직접 구현하기 어려운 번들링의 성능 개선과 최적화를 비교적 쉽게 개선할 수 있다.

😲 렌더링최적화

웹 페이지 렌더링 최적화

웹 페이지를 렌더링하기 위해서는 DOM과 CSS가 필요하다. 그러나 다양한 기능과 효과를 위해서 자바스크립트를 많이 사용하게되면, 자바스크립트는 브라우저에서 단일 스레드로 동작하기 때문에 자바스크립트의 실행 시간은 곧 렌더링 성능과 직결되기때문에 사용자에게 불편함을 줄 수 있다. 렌더링은 자바스크립트의 실행 시간과 자바스크립트로 인해 리렌더링되는 시간을 모두 포함한다. 렌더링 성능 최적화는 이러한 소요 시간을 단축하고 화면에 끊김 없이 그리는 것이다.

최적화방법

1. 레이아웃 최적화
   • 레이아웃이란, DOM요소들이 화면 어느 위치에 어떤 크기로 배치될지 결정하는 계산 과정이다.
2. 자바스크립트 실행 최적화
   • 불필요한 레이아웃으로 인해 실행시간이 오래 걸릴 수 있으므로 성능 저하의 원인을 잘 파악해야함. 또한 레이아웃을 줄일 수 있도록 DOM 및 스타일 변경을 최소화 해야한다.
3. HTML, CSS 최적화
   • 복잡한 선택자는 스타일 계산이 많이 걸린다.
   • 불필요한 wrapper 엘리먼트는 제거한다.
   • reflow(수치계산) < repaint
4. 애니메이션 최적화
5. 리액트에서의 최적화
   • 리렌더링되면서 느려진다. 리렌더링 되는 경우
   1. 자신이 전달받은 props가 변경될 때
   2. 자신의 state가 바뀔 때
   3. 부모컴포넌트가 리렌더링될 때
   4. forceUpdate함수가 실행될 때
   • 방안
   1. 리렌더링 방지 : props의 변화가 없을 때 re-render하지 않는다 => useMemo
   2. 함수가 계속 만들어지는 것을 방지 : useCallback을 사용한 함수는 두번째 인자의 배일이 바뀔때 마다 함수가 새로 만들어진다. => useReducer

참고자료

• 리액트최적화