[프론트엔드] 코드 스플리팅 [1]

728x90

1.서장

먼저 코드 스플리팅에 대하여 알아 보겠습니다.

1.1 코드 스플리팅이란?

코드 분할(Code Splitting) 해석하자면 말 그대로 코드를 분할하는 작업을 말합니다.

여기서 코드를 왜 분할해야 할까? 이런 의문이 생기게 됩니다.

배경

React 즉 javascript로 개발을 하게되면 build를 통해서 하나의 파일에 모든 로직을 구겨 넣어서 개발을 하게 됩니다. 다만 이런경우 프로젝트 규모가 커질수록 당연히 파일용량도 같이 증가하게 됩니다. 특히 SPA(Single Page Application)로 되어있는 프로젝트의 경우 그 용량은 훨신 더 커집니다.

용량이 커진 js파일을 웹 브라우저에서 불러오게 되면 인터넷 환경에 따라 더 큰 로딩시간을 필요로 하게 됩니다.

즉 "코드 스플리팅" -> 코드를 분할해서 필요한 상황에만 불러오자. 라는 목적을 가지고 있습니다.

파일을 분할하여 필요한 시점에만 불러오면 javascript 파일용량이 줄어들것이고, 처음 브라우저 로딩시의 속도가 줄어들어서 성능 최적화가 가능한 것이죠.

1.2 프로젝트 생성

리엑트 프로젝트를 생성하여 빌드 해보겠습니다.

yarn create react-app splitting-sample
cd splitting-sample 
yarn build

프로젝트 디렉토리 안에 build/static 파일이 생성 되어있을 거에요.

static 폴더 안에 css, js 파일이 있으면 됩니다.

안에 내용을 보시면 해시값 "787.273(랜덤)"으로 되어있는 해시값들이 포함되어 있습니다.

이 값을 빌드하는 과정에서 해당 파일의 내용을 따라서 빌드가 생성되고, 이 과정을 통해서 브라우저가 새로 파일을 받아야하는지를 인식하게 됩니다.

chunk.js 파일에는 React, ReactDom 등 node_modules에서 불ㄹ러온 라이브러리 코드들이 들어 있습니다.
main.js 파일에는 프로젝트안에 직접 프로그래밍하는 App.js 같은 컴포넌트에 대한 코드들이 들어 있습니다.

chunk 파일은 상대적으로 main js에 비해서 코드가 길게 되어 있을 겁니다.

여기서 SplitChunks라는 웹펙 기능을 사용하면 자주 바뀌지 않는 코드들이 들어있는 chunk.js 파일의 캐싱 이점을 더 살릴수가 있습니다.

먼저 App.js 파일을 열어서 아래와 같이 코드를 변경해 주세요.

- App.js

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Hello React!
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

그리고 이제 위에서 사용한 yarn build 명령어로 다시 프로젝트를 빌드합니다.

build/static 파일을 열어보시면

chunk.js 파일명은 그대로이고 main.js 파일명은 바뀐것을 확인 할 수 있습니다.

이런식으로 파일을 분리하는 작업들을 코드 스플링이라고 합니다.

프로젝트에 기본으로 내장되어있는 SplitChunks 기능을 사용한 코드 스플리팅은 효율적인 캐싱효과만 있을 뿐입니다.

프로젝트 규모가 점차 커지면 이러한 파일을 bulld할때에도 필요하지 않은 컴포넌트 정보도 다수 불라오게 될것이고, 파일 용량이 매우 커지게 됩니다. 그렇게 되면 웹 로딩도 오래 걸리기 떄문에 사용자 측면에서도 안좋고, 트래픽도 많이 발생할 것입니다.

이러한 문제점을 해결하기 위한 방법이 코드 비동기 로딩입니다.

이번에는 코드 비동기 로딩을 어떻게 해야하는지에 대한 과정을 확인 해보겠습니다.

1.2 코드 스플리팅 진행 순서

코드 스플리팅은 아래와 같은 순서로 진행될 예정입니다.

자바스크립트 함수 비동기 로딩
React.lazy와 Suspense를 통한 컴포넌트 비동기 렌더링
Loadable Components를 통한 컴포넌트 비동기 렌더링