💻 코드 분할(feat. 리액트 공식문서)

⚠️ 정리한 내용은 오타나 잘못된 정보가 있을 수 있습니다. 댓글로 알려주시면 감사하겠습니다.

📃 오늘 공부한 것

번들링

대부분 앱들은 Webpack, Rollup, Browserify같은 툴을 사용하여 여러 파일을 하나로 병합한 번들된 파일을 웹 페이지에 포함하여 한 번에 전체 앱을 로드 할 수 있다.

코드 분할

번들이 거대해지는 것을 방지하기 위한 좋은 해결방법은 번들을 나누는 것이다.

코드 분할은 런타임에 여러 번들을 동적으로 만들고 불러오는 것으로 Webpack, Rollup, Browserify(factor-buldle) 같은 번들러가 지원하는 기능이다.

코드 분할은 여러분의 앱을 지연 로딩하게 도와주고 앱 사용자에게 획기적인 성능 향상을 하게 합니다.

import()

앱에 코드 분할을 도입하는 가장 좋은 방법은 동적 import() 문법을 사용하는 것이다.

before

import { add } from './math';

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

after

import("./math").then(math => {
  console.log(math.add(16, 26));
});

웹팩이 import를 만나면 앱의 코드를 분할한다. cra와 next.js에서는 기본으로 웹팩이 구성되어 있다.

웹팩의 Code Splitting

웹팩의 가장 강력한 기능 중 하나이다. 요청 시 또는 병렬로 다양한 번들로 코드를 분할할 수 있다.

코드분할의 일반적인 세 가지 접근 방식

1. Entry Points

entry 설정을 사용하여 코드를 수동으로 분할합니다.

2. Prevent Duplication

Entry dependencies 또는 SplitChunksPlugin을 사용하여 중복 청크를 제거하고 청크를 분할합니다.

3. Dynamic Imports

모듈 내에서 인라인 함수 호출을 통해 코드를 분할합니다.

React.lazy

React.lazy 함수를 사용하면 동적 Import를 사용해서 컴포넌트를 렌더링 할 수 있다.

before

import OtherComponent from './OtherComponent';

after

const OtherComponent = React.lazy(() => import('./OtherComponent'));
// React 컴포넌트를 default export로 가진 모듈 객체가 이행되는 Promise를 반환해야 합니다.

MyComponent가 렌더링 될 때 OtherComponent를 포함한 번들을 자동으로 불러온다.

lazy 컴포넌트는 Suspense 컴포넌트 하위에서 렌더링되어야 한다.

import React, { Suspense } from 'react';

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

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

Suspense

Suspense 는 lazy 컴포넌트가 로드되길 기다리는 동안 로딩 화면과 같은 예비 컨텐츠를 보여줄 수 있게 해준다. fallback  prop은 컴포넌트가 로드될 때까지 기다리는 동안 렌더링하려는 React 엘리먼트를 받아들인다. Suspense 컴포넌트는 lazy 컴포넌트를 감싸고 하나의 Suspense 컴포넌트로 여러 lazy 컴포넌트를 감쌀 수도 있습니다.

Avoiding fallbacks

import React, { Suspense } from 'react';
import Tabs from './Tabs';
import Glimmer from './Glimmer';

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

function MyComponent() {
  const [tab, setTab] = React.useState('photos');
  
  function handleTabSelect(tab) {
    setTab(tab);
  };

  return (
    <div>
      <Tabs onTabSelect={handleTabSelect} />
      <Suspense fallback={<Glimmer />}>
        {tab === 'photos' ? <Photos /> : <Comments />}
      </Suspense>
    </div>
  );
}

위의 예시의 경우 탭이 'photos'로 변경 'comments'변경 될 때 컴포넌트가 준비되지 않았다면 사용자는 희미하게 보인다. 하지만 희미하게 보이는 것보다는 이전 UI를 보여주는 것이 낫다.

따라서 아래처럼 startTransition API를 사용해 컴포넌트가 준비가 되면 switch하라고 알리는 코드를 넣어주면 된다.

function handleTabSelect(tab) {
  startTransition(() => {
    setTab(tab);
  });
}

React.startTransition

React18에 도입된 새로운 동시 기능이다. React에 중단되거나 이미 보이는 콘텐츠에 대해 suspense fallback으로 돌아가는 것을 방지할 수 있다.

Error boundaries

네트워크 장애 같은 이유로 다른 모듈을 로드에 실패할 경우 에러를 발생시킬 수 있다. Error Boundary를 만들고 lazy 컴포넌트를 감싸면 네트워크 장애가 발생했을 때 에러를 표시할 수 있다.

import React, { Suspense } from 'react';
import MyErrorBoundary from './MyErrorBoundary';

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

const MyComponent = () => (
  <div>
    <MyErrorBoundary>
      <Suspense fallback={<div>Loading...</div>}>
        <section>
          <OtherComponent />
          <AnotherComponent />
        </section>
      </Suspense>
    </MyErrorBoundary>
  </div>
);

Route-based code splitting

번들을 균등하게 분배할 수 있도록 라우트 설정한다. 웹 페이지를 불러오는 시간은 페이지 전환에 어느 정도 발생하며 대부분 페이지를 한번에 렌더링하기 때문에 사용자가 페이지를 렌더링하는 동안 다른 요소와 상호작용하지 않는다.

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

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

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

React.lazy를 React Router 라이브러리를 사용해서 애플리케이션에 라우트 기반 코드 분할을 설정

Named Exports

React.lazy 는 현재 default exports만 지원한다.
named exports를 사용하고자 한다면 default로 이름을 재정의한 중간 모듈을 생성할 수 있다. 이렇게 하면 tree shaking이 계속 동작하고 사용하지 않는 컴포넌트는 가져오지 않는다.

🔥 느낀점

code splitting 적용 사례를 찾아보고 실제로 번들 사이즈가 개선되는 것을 lighthouse 퍼포먼스 점수로도 확인할 수 있었다.
물론 접근성 점수는 저하될 수 있지만 그에 비해 퍼포먼스 수치가 월등히 향상했기 때문에 code splitting의 중요성을 알게 되었다.

Refer

• 리액트 공식문서 - 코드 분할
• code splitting 적용 사례