코드 스플리팅

💡 Ref:  https://velog.io/@velopert/react-code-splitting#1-진짜-기본적인-코드-스플리팅

 

코드 스플리팅 ?

리액트 에서의 코드 스플리팅? From gpt

리액트 코드 스플리팅은 애플리케이션의 JavaScript 코드를 더 작은 청크로 분할하여 필요할 때 동적으로 로드하는 기술입니다. 이를 통해 초기 번들 크기를 줄이고 페이지 로딩 속도를 향상시킬 수 있습니다.

일반적으로 리액트 애플리케이션은 하나의 번들 파일에 모든 JavaScript 코드가 포함되어 있습니다. 그러나 큰 규모의 애플리케이션의 경우 이 번들 파일의 크기가 커져 초기 로딩 시간이 증가하게 됩니다. 코드 스플리팅을 사용하면 애플리케이션을 여러 개의 작은 청크로 분할할 수 있습니다.

분할된 청크는 각각의 기능 또는 라우트와 연관되어 있습니다. 예를 들어, 사용자가 특정 페이지로 이동할 때 해당 페이지에 필요한 코드만 동적으로 로드됩니다. 이렇게 함으로써 사용자가 애플리케이션에 접속할 때 필요하지 않은 코드를 불러오지 않아도 되므로 초기 로딩 속도가 향상됩니다.

리액트 코드 스플리팅은 **React.lazy()**와 **Suspense**를 사용하여 구현할 수 있습니다. React.lazy() 함수는 동적으로 불러올 컴포넌트를 정의하는 데 사용되며, Suspense 컴포넌트는 동적으로 로드되는 컴포넌트를 대기하고 로딩 상태를 처리하는 데 사용됩니다.
간단한 예시를 통해 코드 스플리팅을 이해해 보겠습니다:

import React, { lazy, Suspense } from 'react';

const LazyComponent = lazy(() => import('./LazyComponent'));

const App = () => {
  return (
    <div>
      <h1>My React App</h1>
      <Suspense fallback={<div>Loading...</div>}>
        <LazyComponent />
      </Suspense>
    </div>
  );
};

export default App;

 

참고) lazy, suspense를 사용하는게 아닌 일반 코드 스플리팅

import React, { Component } from 'react';

class App extends Component {
  state = {
    SplitMe: null
  };
  handleClick = () => {
    import('./SplitMe').then(({ default: SplitMe }) => {
      this.setState({
        SplitMe
      });
    });
  };
  render() {
    const { SplitMe } = this.state;
    return (
      <div>
        <button onClick={this.handleClick}>Click Me</button>
        {SplitMe && <SplitMe />}
      </div>
    );
  }
}

export default App;

위의 예시에서 **LazyComponent**는 코드 스플리팅을 적용하고자 하는 컴포넌트입니다. React.lazy() 함수를 사용하여 해당 컴포넌트를 동적으로 로드합니다. Suspense 컴포넌트는 **LazyComponent**가 로딩되는 동안 로딩 상태를 처리합니다.
이렇게 코드를 작성하면 **LazyComponent**는 페이지에 실제로 필요한 시점에서만 로드되므로 초기 로딩 시간이 줄어들게 됩니다.
리액트 코드 스플리팅은 주로 동적 로딩, 라우팅 또는 사용자 액션에 따른 필요한 컴포넌트의 로드 시점을 조절하는 데 사용됩니다. 이를 통해 애플리케이션의 성능을 최적화하고 사용자 경험을 개선할 수 있습니다.

 

코드 스플리팅의 문제점

SSR

컴포넌트가 SSR에서 랜더링 될 때, 문자열 형식으로 랜더링이 된다.

문자열 형식이라 함은 아래 코드를 참고하면 좋을 듯 하다.

import React from 'react';
import ReactDOMServer from 'react-dom/server';

const App = () => {
  return <h1>Hello, World!</h1>;
};

const html = ReactDOMServer.renderToString(<App />); <-- 요부분

console.log(html); // Output: <h1>Hello, World!</h1>

즉, 문자열 형식은 HTML markup 내용만 있을 뿐이다. 따라서 문자열 형식으로 랜더링 된다는 것은 HTML markup 내용만 랜더가 된다는 것과 동일하다.

그렇기 때문에, 코드 스플리팅을 위한 dynamic imports을 실행 할 수가 없다.

해결방안

• react-loadable을 사용함으로써, 페이지 로딩을 할 때 부터 청크파일들을 다른 자바스크립트파일들과 동일한 시점에서 로딩을 시작 할 수 있습니다.