[Optimizing] 코드 스플리팅(Code Splitting)웹 로딩 전략을 알아보자🪚

코드 스플리팅(Code Splitting) 톺아보기! 🪚

코드 스플리팅(Code Splitting)은 애플리케이션의 코드를 작게 쪼개고, 필요한 순간에만 로드하도록 하는 기술입니다.

현대의 웹 애플리케이션은 복잡성이 증가하면서 많은 양의 코드와 리소스를 포함하게 되었습니다... 이러한 대규모 애플리케이션은 초기 로딩 시 모든 코드를 한 번에 다운로드해야 하므로, 사용자가 페이지를 열기까지 기다리는 시간이 길어질 수 있습니다. 

코드 스플리팅은 초기 로딩 속도를 향상시키고, 사용자 경험을 향상시킬 수 있답니다.

---

🧩 코드 스플리팅이란?

코드 스플리팅은 애플리케이션의 코드를 작은 청크(chunk)로 나누는 과정입니다. 기본적으로 모든 코드를 한 번에 로드하지 않고, 필요한 순간에 필요한 코드만 로드해 불필요한 로딩을 방지합니다.

⚙️ 작동원리

1. 청크화: 애플리케이션의 코드를 여러 개의 작은 파일로 나누어, 각 파일이 특정 기능이나 모듈에 해당하도록 합니다.
   • 예를 들어, 사용자가 특정 페이지에 접근할 때 그 페이지에 필요한 코드만 로드하도록 설정할 수 있습니다.
2. 지연 로딩(Lazy Loading): 사용자가 특정 기능이나 페이지를 요청할 때까지 해당 코드가 로드되지 않도록 하여, 초기 로딩 속도를 대폭 개선합니다. 이는 특히 대규모 애플리케이션에서 중요한 성능 향상 요소로 작용합니다.
3. 조건부 로딩: 코드 스플리팅을 통해 특정 조건이 충족되었을 때만 모듈을 로드할 수 있습니다.
   • 예를 들어, 사용자가 버튼을 클릭하거나 특정 이벤트가 발생했을 때 관련된 모듈을 동적으로 가져옵니다.

---

🎯 왜 필요한가요?

1️⃣ 초기 로드 속도 개선

사용자가 앱을 처음 열었을 때, 필요한 부분만 로드하므로 초기 로드 시간이 짧아집니다.

2️⃣ 효율적인 리소스 사용

사용자가 방문하지 않는 페이지나 실행하지 않는 코드는 로드하지 않아 네트워크 부담을 줄입니다.

3️⃣ 더 나은 사용자 경험

앱의 주요 기능이 빠르게 보이고 동작하므로, 사용자 만족도가 올라갑니다.

---

🛠️ 코드 스플리팅을 적용하는 방법

1️⃣ Webpack과 Dynamic Import 활용

Webpack은 코드 스플리팅을 지원하며, 이를 동적 import(import())와 함께 사용하면 효과적입니다.

 

🔨 예제: 동적 import 사용하기

// 기존 방식: 모든 모듈을 한 번에 로드
import HeavyComponent from './HeavyComponent';

function App() {
  return <HeavyComponent />;
}

// 코드 스플리팅 방식: 필요한 순간에만 모듈 로드
function App() {
  const handleClick = async () => {
    const { default: HeavyComponent } = await import('./HeavyComponent');
    console.log(HeavyComponent); // 모듈 로드 완료 후 사용
  };

  return <button onClick={handleClick}>Load Component</button>;
}

2️⃣ React에서의 코드 스플리팅

React는 React.lazy와 Suspense를 통해 코드 스플리팅을 쉽게 구현할 수 있습니다.

 

🔨 예제: React.lazy와 Suspense

import React, { Suspense } from 'react';

const LazyLoadedComponent = React.lazy(() => import('./HeavyComponent'));

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

• React.lazy는 컴포넌트를 동적으로 로드합니다.
• Suspense는 로드 중일 때 표시할 UI를 지정합니다.

📌 꿀팁: Suspense 없이 상태로 로딩 관리

import React, { useState } from 'react';

function App() {
  const [Component, setComponent] = useState(null);

  const handleLoad = async () => {
    const { default: LoadedComponent } = await import('./HeavyComponent');
    setComponent(() => LoadedComponent);
  };

  return (
    <div>
      <button onClick={handleLoad}>Load Component</button>
      {Component && <Component />}
    </div>
  );
}

3️⃣ React Router와 코드 스플리팅

라우팅과 함께 코드 스플리팅을 사용하면, 페이지별로 코드를 로드할 수 있습니다.

 

🔨 예제: React Router와 Suspense

import React, { Suspense } from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

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

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

4️⃣ Third-Party 라이브러리 청크 분리

종종, 큰 라이브러리를 사용하는 경우 전체 앱 크기가 증가할 수 있습니다. 이를 별도 청크로 분리하여 로드하는 것이 좋습니다.

 

🔨 Webpack 설정으로 분리

module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all',
        },
      },
    },
  },
};

---

🎯 베스트 프랙티스

1️⃣  초기 화면을 최소화

초기 렌더링에 꼭 필요한 코드만 번들에 포함하세요. 나머지는 필요 시 로드합니다.

2️⃣ Lazy Loading 활용

이미지, 동영상 등도 Lazy Loading을 통해 사용자가 볼 때만 로드하세요.

<img src="placeholder.jpg" data-src="real-image.jpg" loading="lazy" />

3️⃣ 코드 청크 이름 지정

Webpack에서 코드 청크의 이름을 지정하면 디버깅이 쉬워집니다.

import(/* webpackChunkName: "heavy-component" */ './HeavyComponent');

4️⃣ Critical CSS 추출

초기 렌더링에 필요한 CSS만 따로 로드하여 화면 깜빡임을 방지하세요.

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

---

🧪 실전 적용: E-Commerce 사이트 예제

🛒 Lazy Loading을 적용한 상품 페이지

import React, { Suspense } from 'react';

const ProductDetails = React.lazy(() => import('./ProductDetails'));
const Reviews = React.lazy(() => import('./Reviews'));

function ProductPage() {
  return (
    <div>
      <h1>Product Name</h1>
      <Suspense fallback={<div>Loading Product Details...</div>}>
        <ProductDetails />
      </Suspense>
      <Suspense fallback={<div>Loading Reviews...</div>}>
        <Reviews />
      </Suspense>
    </div>
  );
}

export default ProductPage;

• 사용자에게 가장 중요한 상품 정보와 리뷰를 필요할 때만 로드합니다.
• 초기 로드 속도를 유지하면서도 풍부한 콘텐츠를 제공할 수 있습니다.

---

🌟 결론: 효율적인 로딩, 더 나은 UX

코드 스플리팅은 단순히 “코드를 쪼갠다”를 넘어, 사용자 경험과 성능 최적화의 핵심 전략입니다. Lazy Loading, Dynamic Import, 그리고 Webpack 최적화를 활용해 스마트한 웹 애플리케이션을 만들어 보세요.

 

🌷 전설의 개발자가 되어봅시당! 🌷