3초안에 화면 안뜨면 떠난다 : CodeSplitting

 

👋 1...2...3... 안녕...

구글 조사에 따르면 3초 이상 웹사이트가 지연되면 53%가 떠나간다는 통계가 있다. 따라서 최적화는 정말 중요하다. 웹사이트의 최적화를 위해 코드스플리팅이 사용되는데 어떤 기술인지 알아보자!

 

How mobile latency impacts publisher revenue - Think with Google

---

 

🌈 코드스플리팅(CodeSplitting)란?

코드 스플리팅(Code Splitting)은 주로 웹 개발에서 사용되는 기법으로,
큰 JavaScript 파일을 여러 작은 청크(chunks)나 번들(bundles)로 나누어서 필요할 때만 로드하는 방식을 말한다.
초기 로딩 시간을 줄이고, 사용자 경험을 좋게 만든다.
즉 사이즈가 너무 크니까 나눠서 필요할 때 필요한 것만 꺼내쓰겠다는 의미.

 

일반적으로 웹 어플리케이션(Javascript,css,html 등)은 웹브라우저에서 랜더링할 때 하나의 bundle로 묶어서 로드한다. 프로젝트 사이즈가 커지면 bundle의 용량이 커지고 최초 랜더링 시 늦게 로드가 된다. 따라서 사용자에게 늦게 로드되고 에스컬레이터도 걸어다니는 한국인에겐 참을 수 없는 단점인 것...! 따라서 똑똑한 사람들이 단점을 보완하도록 만든 기술이 코드 스플러팅이다

 

하나의 파일로 압축(왼쪽)         html,css,js가 최대한 압축됨(오른쪽)

---

 

⭐️ CodeSplitting 방법

codesplitting을 하기 위해서 두가지 방법이 있다.

• Dynamic import
• React.lazy() & Suspense

이 중에서 React.lazy( ) 에 대해서 알아보려고 한다.

React.lazy() & Suspense

React.Lazy 와 Suspense 는 React v16.6 부터 추가된 기능으로 React.Lazy 의 경우 Component 를 rendering 할 때 비동기적으로 로딩 하게 해주는 함수 이다.

import React, { lazy } from 'react';

const Article = lazy(()=>import('@layouts/Article'))

• lazy를 import 해주고 codeSplitting할 component를 함수로 만들어준다.

function App() {
  return (
      <Suspense fallback={<p>로딩중...</p>}>
          <Article></Article>
        </Suspense>
  );
}

• Suspense는 codesplitting되어 로드되지 않은 component를 로드할 때 사용된다. fallback를 사용하며 component가 아직 로드 되지 않았을 때 UI를 custom 할 수 있다.

---

//codesplitting 사용한 전체코드 (App.jsx)
import React, { Suspense, lazy } from 'react';
const Article = lazy(()=>import('@layouts/Article'))

function App() {
  return (
      <Suspense fallback={<p>로딩중...</p>}>
          <Article></Article>
        </Suspense>
  );
}

export default App;

//codeSplitting 사용안한 코드
import React from 'react';
import Article from '@layouts/Article';

function App() {
  return (
    <div>
        <Article></Article>
    </div>
  );
}

export default App;

---

 

🌼 경로기반 CodeSplitting (Route 사용)

그렇다면 CodeSplitting을 어디에 적용시킬지 까다로울 수 있다. 따라서 경로를 기반으로 CodeSplitting을 하는 것. React에서 Route를 활용하여 페이지 접속을 하는데 이 때 codeSplitting을 적용시킨다.  아래는 라우트 기반 codeSplitting 예시이다.

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

const Article = lazy(()=>import('@layouts/Article'))
const Login = lazy(()=>import('@pages/login'))
const Post = lazy(()=>import('@pages/post'))

function App() {
  return (

      <Suspense fallback={<p>로딩중...</p>}>
        <Routes>       
          <Route path='/' element={<Article/>}></Route>
          <Route path='/post' element={<Post/>}></Route>
          <Route path='/login' element={<Login/>}></Route>
        </Routes>
      </Suspense>

  );
}

export default App;

---

 

🍀 CodeSplitting 전과 후 비교

경로 기반 CodeSplitting을 사용할 때와 안할 때, localhost:3000/으로 접속 시 어떤 파일이 로드되는지 확인한 결과이다

• 왼쪽: codesplitting ❌ => src의 모든 파일들(layouts,pages 등)이 한번에 다 로드되는 것을 볼 수 있음
• 오른쪽: codesplitting ⭕️  => codesplitting을 했기 때문에 Article 파일만 로드된 것을 볼 수 있음.

CodeSplitting 전(왼쪽)          CodeSplitting 후(오른쪽)

---

 

🔔 마치며...

CodeSplitting는 성능최적화와 관련된 기술이다. 개발과정에서 모든 것을 고려하여 개발하기보다는 마무리 단계에서 성능을 테스트하는 과정에서 적용시키면 좋을 것 같다는 생각을 하며 마친다.

 

---

 

 

참고

https://react-ko.dev/reference/react/lazy

lazy – React