코드 스플리팅이란 무엇인가

코드 스플리팅이란?

코드 스플리팅(Code Splitting)은 큰 규모의 애플리케이션을 여러 개의 작은 청크(chunks)로 나누는 프로그래밍 패턴을 말합니다. 이를 통해 웹 페이지의 초기 로딩 속도를 향상하고, 사용자 경험을 개선하며, 특정 코드가 필요할 때만 로드하여 성능을 향상할 수 있습니다.

 

 

코드 스플리팅 적용 방법

코드 스플리팅은 웹팩(Webpack), 롤업(Rollup), 브라우저리파이(Browserify)와 같은 모듈 번들러를 사용하여 적용할 수 있습니다. 이 중 웹팩을 예시로 들면, import() 함수를 사용하여 비동기적으로 모듈을 로드하는 방식으로 코드 스플리팅을 적용할 수 있습니다.

 

import()를 사용한 코드 스플리팅

import() 함수를 사용하여 비동기적으로 모듈을 로드하는 방식은 JavaScript의 동적 임포트(dynamic imports)를 활용한 코드 스플리팅 방법입니다. 이 방법은 웹팩과 같은 모듈 번들러에서 지원하며, 필요한 시점에 코드를 로드하는 데에 유용합니다.

 

예시코드

// 동기적으로 모듈을 임포트하는 대신
import { add } from './math';

console.log(add(16, 26));

// 동적 임포트를 사용하면 다음과 같이 코드를 작성할 수 있습니다.
import("./math").then(math => {
  console.log(math.add(16, 26));
});

위의 예제에서 import("./math")는 Promise를 반환합니다. 이 Promise는 math 모듈의 내보낸 모든 기능을 포함하는 객체를 반환하는 then 메서드를 가집니다. 이를 활용하여 필요한 시점에 코드를 로드하고 실행할 수 있습니다.

 

 

비동기 모듈 로드의 장점

이러한 방식의 장점은, 애플리케이션의 초기 로드 시에 필요하지 않은 코드를 로드하지 않고, 필요한 시점에만 코드를 로드하여 애플리케이션의 성능을 향상시킬 수 있다는 것입니다. 특히 대형 애플리케이션에서 이 방식은 매우 유용합니다.

또한, import() 함수는 모듈 경로를 변수로 처리할 수 있으므로, 사용자의 입력이나 런타임 조건에 따라 다른 모듈을 로드하는 데에도 사용할 수 있습니다.

let modulePath = user.isAdmin ? './admin.js' : './guest.js';

import(modulePath).then(module => {
  // 모듈 사용
});

 

 

React에서 코드 스플리팅 적용하는 방법

React에서는 React.lazy와 Suspense를 이용하면 비동기적으로 로드하는 컴포넌트를 쉽게 다룰 수 있습니다.

 

React.lazy

React.lazy 함수를 이용하면 동적 import()를 사용해서 컴포넌트를 렌더링하는 시점에 불러올 수 있습니다.

import React, { Suspense } from 'react';

const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <OtherComponent />
      </Suspense>
    </div>
  );
}

 

이 예제에서 OtherComponent는 렌더링이 필요할 때까지 로드되지 않습니다. React.lazy()로 불러온 컴포넌트는 Suspense 컴포넌트로 감싸야하며, 로딩 중에는 fallback prop에 설정한 React 요소가 보입니다.

 

Route-based code splitting

다음으로, React Router를 사용한 라우트 기반 코드 스플리팅 방법도 있습니다. 이 방법은 각 라우트 별로 독립된 코드 청크를 생성하는 것으로, 사용자가 앱의 특정 부분만 방문할 때 해당 부분에 필요한 코드만 불러옵니다.

 

import React, { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

const Home = lazy(() => import('./routes/Home'));
const About = lazy(() => import('./routes/About'));

const App = () => (
  <Router>
    <Suspense fallback={<div>Loading...</div>}>
      <Switch>
        <Route exact path="/" component={Home}/>
        <Route path="/about" component={About}/>
      </Switch>
    </Suspense>
  </Router>
);

 

위의 예제에서 각 라우트에 해당하는 Home, About 컴포넌트는 해당 라우트에 접근하는 순간 로드됩니다.

이렇게 React에서 코드 스플리팅을 적용하면 사용자에게 필요한 코드만 제공함으로써 앱의 로딩 시간을 줄이고 성능을 개선할 수 있습니다.