리액트에서 공식적으로 제공하는 코드 스플리팅 기능인 React.lazy와 Suspense는 SSR을 지원하지 않는다. React 18 부터는 지원한다고 한다. 이번 정리가 끝나면 바로 알아보고 정리해보자. 지금은 Loadable Components를 사용해서 코드 스플리팅을 해보자. Loadable Components는 SSR을 할 때 필요한 서버 유틸 함수와 웹팩 플러그인, babel 플러그인을 제공한다. npm add @loadable/components @loadable/server @loadable/webpack-plugin @loadable/babel-plugin 1) 라우트 컴포넌트 스플리팅하기 우선 BluePage, RedPage, UserPage를 스플리팅 해주자 App.js import ..
코드 스플리팅
코드 스필리팅? 정의 : 싱글 페이지 에플리케이션(SPA)와 같이 용량이 커지면 페이지 로딩 속도가 느려지는 환경에서 특정 상황에서 특정 코드를 불러오기 위해 미리 코드를 분리하는 작업 코드 스플리팅으로 얻는 이점은 다음과 같다. 불필요한 주석, 경고 메시지, 공백등을 제거하여 파일을 최소화 브라우저에서 JSX 문법이나 다른 최신 JS 문법이 원활히 실행되도록 트랜스 파일 작업을 함 이미지와 같은 정적 파일이 있다면 해당 파일을 위한 경로 설정 →위의 이점을 얻는 작업은 webpack이 해준다. 웹팩에 별도 설정을 하지 않으면 프로젝트에서 사용중인 모든 JS와 CSS파일이 하나의 파일로 합쳐진다. 또한, 파일을 빌드하면 파일명에 해시(hash) 값이 포함되어있다. 이 값은 빌드 과정에서 해당 파일의 내용..
