코드 스플리팅

오늘은 SPA의 단점을 보완할 기술인 코드 스플리팅에 대해 공부해봤다. 여기서 말하는 SPA의 단점이란 무엇일까..
바로 보이지도 않는 페이지 등등의 로딩때문에 초기 로딩이 느려진다는 점이다.

예를 들어 메인 페이지에 정보가 필요한 사용자에게는 다른 페이지의 정보는 필요 없는데 SPA상 해당 컴포넌트 정보도 같이 불러오게 되는 것이다! 때문에 코드를 비동기적으로 로딩하여 필요한 시점에 불러오는 작업을 코드 스플리팅이라고 한다.

1. 함수의 스플리팅

일반적으로 외부에 선언한 함수를 가져오기 위해서는 import문을 사용하여 가져온 다음 사용한다.

import funqName from "./.."
const click = e=>{
	funqName(); 
}

하지만 함수를 사용하는 시점에 비동기적으로 불러와서 사용하기 위해서는 dymanic import라는 문법을 사용한다.

const clickBtn = e=>{
 import("./..").then(res => res.defaut())  // export defalut설정 이 되어있을 시 사용 default가 아니면 함수명사용
}

이렇게 함수를 사용할 때 가져온다면 최초 화면을 보여주는 시간을 단축시킬 수 있다.

2. 컴포넌트의 스플리팅

1. react.lazy

React.lazt는 컴포넌트를 렌더링 하는 시점에 로딩하게 해주는 함수입니다.

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

react의 Suspence는 react내장 컴포넌트로 스플리팅 된 코드를 로딩하게 해줍니다.

import React,{Suspence} from 'react';
import { Link } from "react-router-dom";
const SplitCode = React.lazy(()=>import("./aboutData"));
export default function About(){
  return (
    <>
      <h1>어바웃 페이지 입니다.</h1>
      <Suspense fallback={<div>로오디잉주ㅜ우</div>}>
        <SplitCode/>
      </Suspense>
      <Link to="/">홈으로</Link>
    </>
  )
}

이렇게 SPA여도 페이지 이동시에 랜더링 해주는 스플리팅 기술을 이용하여 초기 랜더링 속도를 향상할 수 있습니다.

2. loadable componets 라이브러리 사용

앞서 본 react.lazy는 편하지만 SSR(서버 사이드 랜더링)을 지원하지 않는다. 때문에 SSR에서 스플리팅을 구현하기 위해서는 이 라이브러리를 사용하면 좋다.

링크를 클릭해서 가보면 라이브러리를 어떻게 사용하는 지 알려주는 예제 코드가 있다.

import loadable from '@loadable/component'
const OtherComponent = loadable(() => import('./OtherComponent'),{
	fallback: <div>로오디이잉주우웅</div>
})
function MyComponent() {
  return (
    <div>
      <OtherComponent />
    </div>
  )
}

lazy와는 다르게 Suspence를 사용하지 않아도 되고, 미리 불러오기도 구현 할 수 있다. 링크 버튼을 예로 들면, 사용자가 링크 버튼에 마우스를 올리면 페이지 이동을 하겠다는 의미이다. 물론 드래그 하다 닿을 수 있지만 보통은 그렇지 않은가?

import loadable from '@loadable/component'
const OtherComponent = loadable(() => import('./OtherComponent'),{
	fallback: <div>로오디이잉주우웅</div>
})
const mouseIsOver = ()=>{
	OtherComponent.preload();
}
function MyComponent() {
  return (
    <div>
	  <p onMouseOver={mouseIsOver}>입숨 로람 어쩌구</p>
      <OtherComponent />
    </div>
  )
}

마무리

SPA는 좋은 도구이다. 하지만 초기 랜더링 속도는 UX와 직결되는 민감한 부분이기에 최적화를 통해서 랜더링 속도를 높여주는 방법으로 해결해 보려는 시도이다. 하지만 결국 초기 랜더링 속도는 SSR이 더...⭐