0ju-log
🌙
💻 Frontend

[Next.js] 코드 스플리팅 (Code Splitting)

💡 코드 스플리팅 (Code Splitting)#

📖 코드 스플리팅 (Code Splitting) ? 웹 애플리케이션의 초기 로딩 속도를 개선하기 위해 코드 여러 개의 파일을 청크로 나누는 기법

단순히 “파일을 나눈다”는 의미가 아니라, 사용자가 실제로 필요로 할 때 필요한 코드만 불러오는 전략까지 포함해요

사용 이유 ? 웹 애플리케이션은 하나의 큰 번들 파일로 묶음

  • 파일 크기가 매우 커 초기 로딩 속도가 느려짐
  • 코드 한 줄만 바뀌어도 전체 파일을 다시 빌드해야 함 → 비효율적

⇒ 코드 스플리팅을 통해 파일을 보낼 때 먼저 보낼 수 있는 파일을 먼저 보냄 → 렌더링 속도 증가 → 성능 최적화

📄 코드 스플리팅의 방식

1️⃣ Route 단위 분할

페이지를 전환할 때 필요한 컴포넌트만 불러와요

import React, { Suspense } from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";

const Home = React.lazy(() => import("./pages/Home"));
const About = React.lazy(() => import("./pages/About"));

function App() {
  return (
    <BrowserRouter>
      <Suspense fallback={<div>Loading...</div>}>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
        </Routes>
      </Suspense>
    </BrowserRouter>
  );
}

React.lazy

공식문서에서 lazy의 설명을 다음과 같이 시작해요

lazy를 사용하면 컴포넌트의 코드가 최초로 렌더링될 때까지 로딩을 미룰 수 있다.

lazy loading은 중요도가 떨어지거나 당장은 화면에 보이지 않는 요소들의 로딩을 우선적으로 시행하지 않으면서 웹페이지 로딩 성능을 최적화해요.

쉽게 말하면 페이지 내에서 실제로 필요로 할 때까지 리소스의 로딩을 미루는 것이라고 생각하면 돼요.

const SomeComponent = lazy(() => import('./SomeComponent'));

2️⃣ Component 단위 분할

컴포넌트를 필요할 때만 불러와요

import React, { Suspense } from "react";

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

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
    </Suspense>
  );
}

3️⃣ vendor 분할

📖 vendor 파일 ? 프로젝트에서 전역적으로 사용되는 라이브러리(like react, zustand, framer-motion)를 따로 분리한 청크 파일

  • vendor의 경우 변경 가능성이 낮기 때문에, 유저는 브라우저에 캐시해뒀던 vendor.js를 재사용할 수 있어요. 이로 인해 서버 리소스가 절약되고 초기 로딩 속도가 개선돼요

4️⃣ dynamic import

번들러의 경우, import() 구문을 만나면 자동으로 별도 청크로 분리해요

조건부 로딩이나 특정 상황에서만 모듈을 불러올 때 유용해요

async function loadModule() {
  const { myFunction } = await 
import("./module.js");

  myFunction();
}
← Back↑ Top