리액트를 다루는 기술 - 코드 스플리팅

이미지 출처 - https://velog.io/@elin_me/code-splitting-lls7eaea

리액트 프로젝트를 완성해 사용자에게 제공할때, 빌드 작업을 거쳐서 배포해야 한다.

빌드 작업으로 프로젝트에서 사용되는 .js 안에 불필요한 주석, 경고 메세지, 공백을 제거해 파일 크기를 최소화하고,

브라우저에서 JSX 문법이나 다른 최신 자바스크립트 문법이 원활하게 실행되도록 코드의 트랜스 파일 작업도 할 수 있다.

정적 파일(이미지)이 있다면 해당 파일을 위한 경로도 설정된다.

 

이 작업은 webpack이 담당하며, webpack에서 별도의 설정을 하지 않으면 모든 자바스크립트 파일이 하나의 파일로 합쳐지고 모든 CSS 파일도 하나의 파일로 합쳐진다.

 

CRA(create react-app)로 프로젝트를 빌드할 경우, 최소 두 개 이상의 자바스크립트 파일이 생성된다.

CRA의 기본 webpack 설정에는 SplitChunks 기능이 적용되어 { node_module에서 불러온 파일, 일정 크기 이상의 파일, 여러 파일간 공유된 파일} 을 자동으로 따로 분리해 캐싱 효과를 낸다.

(자주 바뀌지 않는 코드들을 분리해 따로 파일에 저장하여 캐싱의 이점을 더 오래 누릴 수 있다.)

 

이렇게 파일을 분리하는 작업을 코드 스플리팅이라고 한다.

코드 스플리팅은 단순히 효율적인 캐싱 효과만 있다.

SPA(싱글 페이지 애플리케이션) 개발시,

사용자가 A 페이지에 방문했다면 B 페이지와 C페이지에서 사용하는 컴포넌트 정보는 필요하지 않다.

사용자가 실제로 B,C 페이지로 이동할때만 필요하다.

하지만 리액트 프로젝트에 별도로 설정하지 않으면 A, B, C 컴포넌트에 대한 코드가 모두 한 파일(main)에 저장된다.

그 양이 많아 질수록 로딩이 오래 걸리기 때문에 사용자 경험도 안 좋아지고 트래픽도 많이 나온다.

 

이러한 문제점을 '코드 비동기 로딩' 으로 해결할 수 있다.

이 또한 코드 스플리팅 방법 중 하나로, '코드 비동기 로딩' 을 통해 자바스크립트 함수, 객체, 컴포넌트를 처음에는 불러오지 않고 필요한 시점에 불러와서 사용할 수 있다.

---

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

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

// App.js
import logo from "./logo.svg";
import "./App.css";

function App() {
  const onClick = () => {
    import("./notify").then((result) => result.default());
    // import를 함수로 사용시, Promise를 반환한다.
    // 이 함수를 통해 모듈을 불러올때 default로 내보낸 것은 result.default를 참조해야 사용 가능
  };
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p onClick={onClick}>Hello React!</p>
      </header>
    </div>
  );
}

export default App;

---

state를 사용한 코드 스플리팅

const SplitMe = () => {
  return <div>SplitMe</div>;
};

export default SplitMe;

import { 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 사용하기

React.lazy : 컴포넌트를 랜더링하는 시점에서 비동기적으로 로딩할 수 있게 해주는 유틸 함수

Suspense : 리액트 내장 컴포넌트, 코드 스플리팅된 컴포넌트를 로딩하도록 발동시키고,

fallback props를 통해 로딩 중에 보여줄 JSX를 지정할 수 있다. 

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

const SplitMe = 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> loading...</div>}>
          {visible && <SplitMe />}
        </Suspense>
      </header>
    </div>
  );
}

export default App;

---

Loadable Components를 통한 코드 스플리팅

 

Loadable Components : 코드 스플리팅 도와주는 서드파티 라이브러리

이 라이브러리는 서버 사이드 랜더링을 지원합니다. (laxy, Suspense는 이를 지원하지 않습니다.)

또한 랜더링하기 전에 필요할 때 스플리팅된 파일을 미리 불러올 수 있는 기능도 있다.

(* 서버 사이드 랜더링 : 웹 서비스의 초기 로딩 속도 개선, 캐싱 및 검색 엔진 최적화 기술로,

이를 사용하면, 웹 서비스의 초기 렌더링을 서버 쪽에서 처리하여,

서버에서 렌더링한 html 결과물을 그대로 사용해 초기 로딩 속도가 개선되며,

검색 엔진에서 크롤링할 때도 문제가 생기지 않는다.

서버 사이드 렌더링 자세히 알아보기- https://chestnutsweetpotato.tistory.com/93)

import logo from "./logo.svg";
import "./App.css";
import { useState } from "react";
import loadable from "@loadable/component";
const SplitMe = loadable(() => import("./SplitMe"), {
  fallback: <div> loading... </div>,
});

function 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>
        {visible && <SplitMe />}
      </header>
    </div>
  );
}

export default App;