[React] 코드 분할(Code Spliting)

Hannahhh·2022년 9월 29일

목록 보기

27/30

🔍 코드 분할(Code Spliting)

현재는 브라우저 JavaScript 엔진이 해석해야하는 JavsScript 코드 양이 많아졌으며, DOM을 다루는 정도가 정교해지면서 JavaScript 코드 자체가 방대해지고 무거워졌다.

따라서, React 앱들은 HTML 웹 페이지에 JavaScript를 쉽게 추가하기 위해 Webpack, Rollup과 같은 툴을 사용해 번들링하는데, 해석해야하는 JavaScript 코드가 방대해지고 무거워짐에 따라, 특정 지점에서 코드를 해석하고 실행하는 정도가 느려지게 되었다.

즉, 번들이 커지면서 앱의 로드 시간이 길어진다.

이렇게 번들이 거대해지는 것을 방지하기 위한 해결방법으로, 어느 페이지에서 코드를 해석하고 실행하는 정도가 느려졌는 지 파악해서 번들을 나눈 뒤, 특정 코드가 필요할 때 해당 코드를 불러오는 방법을 고안 했다.

이 방법이 바로 번들을 물리적으로 나누는 코드 분할이다.

코드 분할은 런타임 시 여러 번들을 동적으로 만들고 불러오는 것으로, Webpack, Rollup과 같은 번들러가 지원하는 기능이다.

✔ 번들 분할 or 줄이는 법

서드파티 라이브러리를 사용 할 때, 서드파티 라이브러리는 다양한 메소드를 제공하기 위해 코드의 양이 많으므로 번들링 시 많은 공간을 차지한다.

따라서, 사용 중인 라이브러리를 모두 불러와서 사용하는 것 보다는 따로 불러와서 사용하는 것이 좋다.

/* 이렇게 lodash 라이브러리를 전체를 불러와서 그 안에 들은 메소드를 꺼내 쓰는 것은 비효율적이다.*/
import _ from 'lodash';

...

_.find([]);

/* 이렇게 lodash의 메소드 중 하나를 불러와 쓰는 것이 앱의 성능에 더 좋다*/
import find from 'lodash/find';

find([]);

/* lodash 라이브러리 :
하나의 폴더와 같고, 그 폴더 안에는 개발 시 다양한 상황에 쓰기 좋은 메소드들, 
즉 함수 코드들이 들어 있다.
이 함수 코드들의 양이 상당하므로, 필요한 것만 가져다 쓰는 게 좋다.*/

⭐ 서드파티(Third Party) 라이브러리?

개인 개발자나 프로젝트 팀, 혹은 업체등에서 개발하는 제 3자 라이브러리로, 플러그인이나 라이브러리 또는 프레임워크 등이 존재하며, 이 라이브러리를 잘 사용하면 편하고 효율적인 개발을 할 수 있다.

👀 React에서의 코드 분할

React는 SPA(Single-Page-Application)로, 사용하지 않는 모든 컴포넌트까지 한 번에 불러오기 때문에 첫 화면이 렌더링 될때까지의 시간이 오래걸린다. 따라서, 사용하지 않는 컴포넌트는 나중에 불러오기 위해 코드 분할 개념을 도입했다.

React에서 코드 분할하는 방법은 static import(정적 불러오기)와 dynamic import(동적 불러오기)가 있으며, static omport의 경우는 기존에 사용했던 방법으로, 현재는 dynamic import를 사용하고 있다.

✔ Static Import


// Static Import

// 최상위에서 import 지시자를 이용해 라이브러리 및 파일을 불러옴
import moduleA from "library";

form.addEventListener("submit", e => {
  e.preventDefault();
  someFunction();
});

const someFunction = () => {
  // 코드 중간에서 불러온 파일 사용
}

✔ Dynamic Import

form.addEventListener("submit", e => {
  e.preventDefault();
  
	/* 이런 식으로 코드의 중간에 불러올 수 있다. */
  import('library.moduleA')
    .then(module => module.default)
    .then(someFunction())
    .catch(handleError());
});

const someFunction = () => {
    /* moduleA를 여기서 사용 */
}