리다기 정리10(코드 스플리팅)

yarn build를 하고 build/static/js 파일을 들어가보면 2로 시작하는 파일과 main으로 시작하는 파일이 있다.

2로 시작하는 파일에는 React, ReactDOM 등 node_modules에서 불러온 라이브러리 관련 코드가 들어 있고, main으로 시작하는 파일에는 직접 프로젝트에 작성하는 App 같은 컴포넌트에 대한 코드가 들어있다.

App.js의 내용을 변경한 후 build를 하면 main으로 시작하는 파일의 이름이 바뀐다. 이렇게 파일을 분리하는 작업을

코드 스플리팅이라고 한다.

리액트 프로젝트에 별도로 설정하지 않으면 A,B,C 컴포넌트에 대한 코드가 모두 한 파일(main)에 저장된다. 애플리케이션의 규모가 커지면 로딩이 오래 걸리고 트래픽도 많이 나온다.

=> 해결책 : 코드 비동기 로딩

 

자바스크립트 함수 비동기 로딩

notify.js

export default function notify() {
  alert("안녕하세요!");
}

 

App.js

  const onClick = () => {
    // notify();
    import("./notify").then((result) => result.default());
  };

 

build를 하면 3으로 시작하는 파일 안에 notify 관련 코드가 들어간다.

 

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

state를 사용한 코드 스플리팅

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

class App extends Component {
  state = {
    SplitMe: null,
  };
  handleClick = async () => {
    const loadedModule = await import("./SplitMe");
    this.setState({
      Splitme: loadedModule.default,
    });
  };
  render() {
    const { SplitMe } = this.state;
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p onClick={this.handleClick}>Hello React!</p>
          {SplitMe && <SplitMe />}
        </header>
      </div>
    );
  }
}

export default App;

 

React.lazy와 Suspense 사용하기

import React, { useState, Suspense } from "react";
import logo from "./logo.svg";
import "./App.css";
const SplitMe = React.lazy(() => import("./SplitMe"));
const 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>loading...</div>}>
          {visible && <SplitMe />}
        </Suspense>
      </header>
    </div>
  );
};

export default App;

Loadable Compoenents를 통한 코드 스플리팅

Loadable Components는 코드 스플리팅을 편하게 하도록 도와주는 서드파티 라이브러리이다. 이 라이브러리의 이점은 서버 사이드 렌더링을 지원한다는 것이다. 또한 렌더링하기 전에 필요할 때 스플리팅된 파일을 미리 불러올 수 있다는 기능도 있다.

yarn add @loadable/component

다른 점은 Suspense를 사용할 필요가 없고 로딩중에 다른 UI를 보여 주고 싶다면 loadable의 두번째 인자 fallback

preload도 가능

import React, { useState, Suspense } from "react";
import logo from "./logo.svg";
import "./App.css";
import loadable from "@loadable/component";
// const SplitMe = React.lazy(() => import("./SplitMe"));
const SplitMe = loadable(() => import("./SplitMe"), {
  fallback: <div>loading...</div>,
});
const App = () => {
  const [visible, setVisible] = useState(false);
  const onClick = () => {
    setVisible(true);
  };
  const onMouseOver = () => {
    SplitMe.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>
        {/* <Suspense fallback={<div>loading...</div>}>
          {visible && <SplitMe />}
        </Suspense> */}
        {visible && <SplitMe />}
      </header>
    </div>
  );
};

export default App;

 

이것외에도 타임아웃, 로딩 UI 딜레이, 서버 사이드 렌더링 호환 등 다양한 기능 제공

loadable-components.com/docs/delay/

Loadable Components