[React] bundle size 줄이는 방법

리액트로 만든 SPA는 CSR(클라이언트 사이드 렌더링)이기 때문에, 첫 웹페이지를 불러오기 까지 시간이 많이 걸린다. 이를 최적화 하는 방법중 번들된 자바스크립트 파일의 크기를 최대한 줄여내면 다운로드 시간을 줄일 수 있다.

 

1. 소스코드 최소화 하기

소스코드를 작성할 때, 작성자와 다른사람들이 코드를 해석하고 이해할 수 있도록 적절하게 공백과 개행을 사용하고 변수와 함수의 이름을 그 자체만 보고 역할을 알 수 있도록 하는 것이 필수적이다. 

minify

minify는 압축하기 라고 할 수 있다. 불필요한 모든 공백과 개행을 지우고, 문법적으로 필수가 아닌(자바스크립트의 세미콜론 등)을 제거하는 과정을 일컷는다.

 

Uglify

Uglify는 난독화 라고 번역되는데, 변수명과 함수명을 변경해 해석을 어렵게 하는 과정을 의미한다. 이름을 단축해 불필요한 데이터를 제거하는 것과 더불어, 외부인이 소스코드를 열어보더라도 그 변수와 함수가 하는 역할을 해석하는 것을 어렵게 하는 효과가 있다. 일차적이지만 기초적인 보안효과를 가져다 준다.

 

2. 성능 측정을 위한 라이브러리를 설치하여 불필요하거나 사이즈가 큰 라이브러리를 사이즈가 작은 다른 라이브러리로 대체하기

webpack-bundle-analyzer 등 번들사이즈를 측정할 수 있는 라이브러리를 설치하여 굳이 필요 없거나, 다른 작은 용량의 라이브러리로 대체 할 수 있는지 파악하여 사이즈를 줄인다.

 

3. Code Splitting

 코드 스플리팅을 통해 사용자가 현재 필요한 부분을 제외한 부분을 lazy load 시킨다. 코드 전체 양이 줄어들지는 않지만 사용자가 필요로 하지 않는 코드를 로드하는 것을 피하는 것이다.

 

1. Webpack은 자바스크립트에서 코드스플리팅을 할 때 자주 쓰인다.

2. dynamic import방식 : React.lazy를 활용하여 사용자가 필요한 시점에 import를 한다.