코드 스플리팅

개요

• JS로 개발하면, 하나의 파일에 모든 로직이 들어가고 JS파일 용량도 커질 것
• 용량이 커지면 페이지 로딩 속도가 느려질 것
• 코드 스플리팅은 지금 당장 필요한 코드가 아니라면 따로 분리시켜서, 필요할 시점에 불러와서 사용할 수 있게 하고 이를 통해 페이지 로딩 속도를 개선 시킬 수 있다.

React.lazy와 Suspense를 통한 컴포넌트 코드 스플리팅

// App.js

import logo from "./logo.svg";
import "./App.css";
import React, { Suspense, useState } from "react";

const SplitMe = React.lazy(() => import("./SplitMe"));

function App() {
  const [visible, setVisible] = useState(false);
  const onClick = () => {
    setVisible(true);
  };
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p onClick={onClick}>Hello React!</p>
        <Suspense fallback={<div>로딩 중...</div>}>
          {visible && <SplitMe />}
        </Suspense>
      </header>
    </div>
  );
}

export default App;

• Suspense는 리액트 내장 컴포넌트로서 코드 스플리팅된 컴포넌트를 로딩하도록 발동시킬 수 있고, 로딩이 끝나지 않았을 때 보여줄 UI를 설정할 수 있다.
• Suspense에서 fallback props를 통해 로딩 중에 보여 줄 JSX를 지정

Loadable Components를 통한 코드 스플리팅

• Loadable Components는 코드 스플리팅을 편하게 하도록 도와주는 라이브러리
• SSR을 지원한다.
• React18 이후, Suspense에 SSR 기능이 추가되었음

$ yarn add @loadable/components

// App.js

import logo from "./logo.svg";
import "./App.css";
import React, { useState } from "react";
import loadable from "@loadable/component";

const SplitMe = loadable(() => import("./SplitMe"), {
  fallback: <div>로딩 중...</div>,
});

function App() {
  const [visible, setVisible] = useState(false);
  const onClick = () => {
    setVisible(true);
  };
  const onMouseOver = () => {
    SplitMe.preload(); // 컴포넌트 preload
  };

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p onClick={onClick} onMouseOver={onMouseOver}>
          Hello React!
        </p>
        {visible && <SplitMe />}
      </header>
    </div>
  );
}

export default App;

• 로딩 중 다른 UI를 보여 주고 싶다면 fallback에 작성해 준다.
• ‘Hello React!’ 문구에 커서를 올리는 시점에 파일이 불러와진다.