Colin's Blog
[javascript] 리액트 라우터의 코드 스플리팅 최적화 방법

리액트 라우터를 사용하는 경우에는 애플리케이션의 성능을 향상시키기 위해 코드 스플리팅을 적용하는 것이 중요합니다. 코드 스플리팅은 애플리케이션의 번들 크기를 줄이고 초기 로딩 속도를 개선하는데 도움이 됩니다. 이번 블로그 포스트에서는 리액트 라우터의 코드 스플리팅을 위한 최적화 방법을 알아보겠습니다.

1. React.lazy와 Suspense 사용하기

React.lazy와 Suspense는 신규 리액트 API로, 지연된 컴포넌트를 사용하여 코드 스플리팅을 할 수 있게 해줍니다. 이를 통해 필요한 컴포넌트가 필요한 시점에 로딩되도록 할 수 있습니다. 아래의 예제는 React.lazy와 Suspense를 사용하여 컴포넌트를 코드 스플리팅하는 방법을 보여줍니다.

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

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

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

Suspense 컴포넌트는 fallback prop을 통해 로딩 중에 표시할 내용을 지정할 수 있습니다. 위의 예제에서는 “Loading…“이라는 텍스트를 표시하도록 지정했습니다.

2. 동적 임포트 사용하기

리액트 라우터에서는 동적 임포트를 사용하여 필요한 컴포넌트를 로딩할 수도 있습니다. 이를 통해 라우트로 이동할 때 필요한 컴포넌트만 로딩할 수 있습니다. 아래의 예제는 동적 임포트를 사용하여 코드 스플리팅하는 방법을 보여줍니다.

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

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

function App() {
  return (
    <Router>
      <React.Suspense fallback={<div>Loading...</div>}>
        <Switch>
          <Route
            exact
            path="/"
            render={() => <Home />}
          />
        </Switch>
      </React.Suspense>
    </Router>
  );
}

동적 임포트를 사용하는 경우에는 컴포넌트를 import 하기 전에 로딩 화면을 표시할 수도 있습니다.

3. 웹팩의 코드 스플리팅 설정 변경하기

리액트 라우터의 코드 스플리팅을 최적화하기 위해 웹팩의 설정을 변경할 수도 있습니다. 웹팩의 SplitChunks 플러그인을 사용하면 공통 모듈을 분리할 수 있습니다. 아래의 예제는 웹팩의 SplitChunks 플러그인을 사용하여 코드 스플리팅 설정을 변경하는 방법을 보여줍니다.

// webpack.config.js

module.exports = {
  // ...
  optimization: {
    splitChunks: {
      cacheGroups: {
        commons: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all',
        },
      },
    },
  },
};

위의 예제에서는 node_modules 디렉토리에서 임포트되는 코드를 vendors.js로 분리합니다. 이렇게 분리된 모듈은 따로 로딩됩니다.

결론

리액트 라우터에서 코드 스플리팅을 적용하여 애플리케이션의 성능을 향상시킬 수 있습니다. React.lazy와 Suspense를 사용하거나 동적 임포트를 사용하여 필요한 컴포넌트들을 필요한 시점에 로딩하도록 할 수 있습니다. 또한 웹팩의 SplitChunks 플러그인을 사용하여 공통 모듈을 분리할 수도 있습니다. 이러한 최적화 방법을 적절히 사용하여 사용자 경험을 향상시키는 것이 중요합니다.

참고 자료:

© 2018 Colin. All rights reserved.