코드 스플리팅이란?

리액트 프로젝트를 실제로 배포하게되어 프로덕션에서 사용하게 될 땐, 우리는 빌드작업을 거쳐야합니다. 빌드 작업을 통하여 프로젝트에서 사용하는 자바스크립트 파일 안에서 불필요한 주석, 경고메시지, 공백 등을 제거하여 파일 사이즈를 최소화하기도 하고, 프로젝트 내에서 사용하는 정적(static) 파일들이 있다면 해당 파일들을 위한 경로지정도 이뤄지지요.

이 작업은 웹팩(Webpack) 이라는 도구가 담당하여 진행을 하고 있습니다. 웹팩에서 가장 기본적인 설정으로는, 자바스크립트 파일은 하나의 파일로 합쳐지고, CSS 파일 또한 하나의 파일로 합쳐지게 됩니다. 하지만, CRA(create-react-app)로 만든 프로젝트의 경우, 웹팩 v4 에서 도입된 SplitChunks 기능이 이미 적용되어있습니다. SplitChunks 는 node_modules 에서 파일을 불러오고 있거나, 파일 사이즈가 일정 크기를 넘어가거나, 다른 모듈들에서 필요로하는 횟수가 일정 횟수를 넘어가면 파일을 따로 분리시켜서 캐싱의 효과를 더욱 제대로 누리도록 할 수 있게 해주는 기능입니다.

한번, 리액트 프로젝트를 생성해서 빌드를 해볼까요?

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

그리고 나서 해당 프로젝트의 build 디렉토리를 확인해보면 다음과 같은 결과가 나타납니다:

현재 main.___.chunk.js 에는 우리가 만든 리액트 컴포넌트의 내용들이 들어있습니다. 그리고, 1.___.chunk.js 에는 우리 프로젝트에서 사용을 하고 있는 라이브러리 (react, react-dom 등) 의 코드들이 들어가있습니다.

파일의 이름에는 해시(hash)값이 포함되는데, 이 값은 빌드를 하게 되는 과정에서 해당 파일의 실제 내용에 따라 생성됩니다. 그리고, 만약에 파일의 내용이 바뀌지 않는다면 이 해시값 또한 바뀌지 않습니다. 이를 통하여, 브라우저가 특정 페이지에 재방문하게 될 때 자바스크립트 파일이 같은 경우 기존에 받아놨던 파일을 사용 할 수 있기에 캐싱의 이점을 더 오랫동안, 제대로 누릴 수 있게 되겠지요.

한번, App.js 코드만 한번 바꿔보겠습니다.

App.js

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <img src={logo} className="App-logo" alt="logo" />
        <p>Hello React!</p>
      </div>
    );
  }
}

export default App;

그리고 나서 다시 빌드를 해보겠습니다.

$ yarn build

다시 build 디렉토리를 확인해보면 main.___.chunk.js 파일의 이름만 바뀌고, 1.___.chunk.js 파일의 이름은 이전 상태 그대로 유지하고 있는것을 보실 수 있습니다.

이러한 SplitChunk 코드 스플리팅은 단순히 효율적인 캐싱효과만 있을 뿐입니다. 예를들어서 여러분들이 페이지 A, B, C 로 구성된 SPA 를 개발을 한다고 가정해봅시다. 사용자가 A 페이지에 방문을 했을땐, B 페이지와 C 페이지에서 사용하고 있는 컴포넌트에 대한 정보는 필요하지 않습니다. 사용자가 실제로 B 페이지로 가려고 할 때만 필요하겠죠. 하지만, 리액트 프로젝트에 별도의 설정을 하지 않는다면, A, B, C 컴포넌트 모두 하나의 파일에 저장이되버립니다. 만약에 앱의 규모가 커지면, 지금 당장 필요하지 않는 컴포넌트들에 대한 정보도 처음부터 다 불러오려고하면 파일사이즈가 너무 커져버려서 유저 경험도, 트래픽 량도 비효율적이겠지요.

이러한 문제점을 해결해 줄 수 있는 것은 바로 컴포넌트 비동기로딩입니다. 코드 스플리팅은 꼭 컴포넌트의 형태가 아니여도 상관없습니다. 자바스크립트 함수나 객체 또한 코드 스플리팅 할 수 있습니다.

자바스크립트 비동기 로딩을 하게 된다면, 우리가 사전에 정한 특정 코드들을 따로 다른 파일로 저장하여 실제로 필요하게 될 때 불러와서 사용 할 수 있게 됩니다.

이번 장에서는, 리액트 컴포넌트를 비동기적으로 로딩하는 방법을 한번 배워보겠습니다.

results matching ""

    No results matching ""