[React] 프론트를 빌드하면 왜 모달(페이지) 로딩이 빨라질까?

 

특정 프로젝트를 진행하던 중

여러 페이지를 탭 형태로 동시에 열 수 있는 구조를 사용하고 있었다.

일반적인 페이지 이동 방식이라면 라우터를 통해 기존 페이지가 사라지고 새로운 페이지가 렌더링될 텐데

 

이 프로젝트에서는 사용자가 탭을 이동하면서 여러 작업을 동시에 진행할 수 있도록 할 필요가 있어서

입력 중이던 데이터가 탭을 이동한다고 해서 사라지면 안되는 상황이었다.

 

결과적으로

모든 탭의 페이지 컴포넌트를 하나의 DOM 트리 안에 유지하고 현재 활성화된 탭만 화면에 보이도록 CSS로 제어하는 방식을 택했다. (단점은 탭이 많아지면 속도저하가 발생...보통은 탭 최대 개수를 제한하는 방식으로 해결)

 

아무튼 이 모달로딩 속도를 테스트하던 도중 든 의문점이 있는데

npm run dev

 

를 하고 브라우저에서 모달 초기 로딩을 테스트했는데 확실히 속도가 0.5초~1초 가량 사이로 느렸다.

 

그런데 

npm run build

빌드를 한 뒤

npm run preview

 

빌드된 dist의 index를 실행하면 모달 로딩이 훨씬 빠르게 느껴졌다.

 

 

나는 왜 빌드된 결과물 로딩이 개발환경에서 실행했을때 보다 더 빠르게 느껴지는지 궁금증을 가졌다.

관련해서 gpt한테 물어보니

 

1. npm run dev

npm run dev (개발 모드)로 실행을 하면 이는 개발자가 개발을 편하게 하기 위한 환경이기 때문에

코드수정후 바로 화면에 반영되는 HMR 기능이 동작하고 디버깅을 위한 다양한 기능들이 백그라운데에서 활성화된다.

 

예시)

-  JSX 파일을 실시간으로 JS로 변환

-  모듈을 파일 단위로 개별 로딩

-  소스맵 생성

-  HMR 처리

-  개발용 경고 메시지와 검사 로직 활성화

 

 

즉, 개발 편의성을 위해 많은 추가작업이 실행되므로 상대적으로 느릴수 있다.

 

2. npm run build

npm run build를 실행하면 Vite나 Webpack 같은 번들러가 프로젝트 코드를 실제 서비스용으로 최적화를 진행한다.

이 과정에서 다음과 같은 작업이 수행한다

 

예시)

-  여러 JS 파일을 번들링

-  코드 압축(minify)

-  사용되지 않는 코드 제거(tree shaking)

-  페이지 단위 코드 분할(chunk) 생성

 

결과적으로 개발 시 수백 개의 모듈로 나뉘어 있던 코드가 몇 개의 최적화된 파일로 정리된다.

 

특히 모달이나 페이지 로딩이 빨라지는 이유는

React 프로젝트에서는 보통 페이지나 모달을 lazy loading 방식으로 불러온다.

 

예를들면)

const viewModules = import.meta.glob("/src/pages/**/*.jsx");

 

이 구조는 각 페이지를 별도의 chunk 파일로 분리한다.

 

동작 방식은 처음 앱이 로드될 때는 main.js만 다운로드되고 사용자가 특정 모달을 열면 그 페이지에 해당하는 청크파일만 추가적으로 로드 하는 것이다

즉, 전체 코드를 한번에 불러오는 것이 아니라 필요한 코드만 그때그때 로딩하는 구조가 된다.

(그래서 게으른 로딩(lazy loading)방식 이구나...)

 

만약 여기서 레이지로딩방식 대신 정적으로 전부 import해 놓은 상태라면 결과는 어떻게 될까?

사용자가 실제로 열지 않는 페이지의 코드까지 처음부터 전부 다운로드하게 되므로

사용자가 사이트에 진입했을때 초기로딩 속도가 늘어나게 된다

 

단, 득과 실이 있다.

Lazy Loading이 항상 무조건 좋은 건 아닌게, 정적 import의 경우 초기로딩만 느리고

이미 모든 코드가 로딩되어있는 상태로 사용하기 때문에 모달로딩속도가 더 빠르다.

 

하지만 사용자가 보통 모든 페이지를 열 일은 없기때문에 총체적으로 봤을 때 

대부분의 서비스는 Lazy Loading을 사용한다.