리소스 로딩 최적화란?

Why? 웹 애플리케이션의 성능을 향상시키고, 사용자 경험을 개선하기 위해

1. 페이지 로드 속도 개선 : 사용자가 빠르게 콘텐츠를 볼 수 있도록 지원

2. 사용자 경험(UX) 향상 : 빠르고 원활한 사용자 인터페이스 제공

3. 네트워크 대역폭 효율화 : 데이터 크기를 줄여 네트워크 트래픽을 줄일 수 있음

How?

• 이미지 최적화 : 이미지 크기 줄이기, 포맷 변경, Lazy Loading 등

• 코드 최적화 : JavaScript와 CSS 난독화 및 병합, 불필요한 코드 제거

• 리소스 로드 순서 최적화 : 중요한 리소스 우선적으로 로드하고, 나머지는 비동기로 로드

• Lazy Loading : 사용자가 필요로 할 때만 리소스를 로드

Static Import 정적 자원 로딩 패턴

import logo from './assets/logo.png';
import './styles/global.css';
import data from './data/info.json';

function App() {
	return (
	<img src={logo} alt="Logo" />,
	<h1>Hello, World!</h1>,
	<div>{data.title}</div>
	);
}

예제 : 이모지 사용 채팅 앱

 

// App.js

import React from "react";
// 정적 로드
import UserInfo from "./components/UserInfo";
import ChatList from "./components/ChatList";
import ChatInput from "./components/ChatInput";

import "./styles.css";

console.log("App loading", Date.now());

const App = () => (
  <div className="App">
    <UserInfo />
    <ChatList />
    <ChatInput />
  </div>
);

export default App;

// ChatInput.js

import React from "react";
import Send from "./icons/Send";
import Emoji from "./icons/Emoji";

import EmojiPicker from "./EmojiPicker";

const ChatInput = () => {
  const [pickerOpen, togglePicker] = React.useReducer(state => !state, false);

  return (
    <div className="chat-input-container">
      <input type="text" placeholder="Type a message..." />
      <Emoji onClick={togglePicker} />
      {pickerOpen && <EmojiPicker />}
      <Send />
    </div>
  );
};

console.log("ChatInput loaded", Date.now());

export default ChatInput;

// EmojiPicker.js

import React from "react";
import Picker from "emoji-picker-react";

const EmojiPicker = () => (
  <div className="emoji-picker">
    <Picker />
  </div>
);

export default EmojiPicker;

장점

1. 정적 자원이 빌드 타임에 최적화되어서 런타임 성능 개선

2. 브라우저 캐싱을 통해 재요청 없이 빠르게 제공

3. 의존성이 코드 내에 명확히 정의되어 관리하기 쉽고 디버깅 용이

4. 경로변경이 발생해도 유지보수 용이

단점

1. 번들 크기 증가

2. 빌드 시간 증가

3. 유연성 감소

Dynamic Import 동적 자원 로딩 패턴

동작원리

1. 런타임에서 리소스 로드
1. import() 사용하여 JavaScript 모듈을 런타임에서 비동기적으로 로드

2. 코드 스플리팅
1. 빌드 도구(Webpack, Vite 등)가 동적 import 감지하고, 모듈을 별도의 번들로 분리
2. 특정 시점에 이 번들을 요청하여 로드

3. Lazy Loading 지연 로딩
1. 사용자가 특정 경로나 기능에 접근할 때만 필요한 모듈로 로드

import React, { Suspense } from "react";
// Lazy Loading
const MyComponent = React.lazy(() => import('./MyComponent')); 

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>  // 로딩 상태 표시
      <MyComponent />  // 렌더링 시점에 로드
    </Suspense>
  );
}

export default App;

예제 : 이모지 사용 채팅 앱

// ChatInput.js

import React, { Suspense, lazy } from "react";
import Send from "./icons/Send"; // 정적 로드
import Emoji from "./icons/Emoji"; // 정적 로드

// EmojiPicker 동적 로드
const EmojiPicker = lazy(() =>
  import(/*webpackChunkName: "emoji-picker" */ "./EmojiPicker")
);

const ChatInput = () => {
  const [pickerOpen, togglePicker] = React.useReducer(state => !state, false);

  return (
    <Suspense fallback={<p id="loading">Loading...</p>}>
      <div className="chat-input-container">
        <input type="text" placeholder="Type a message..." />
        <Emoji onClick={togglePicker} />
        {pickerOpen && <EmojiPicker />}
        <Send />
      </div>
    </Suspense>
  );
};

console.log("ChatInput loaded", Date.now());

export default ChatInput;

이모지를 쓰려면 사용자는 조금의 시간을 더 기다려야 하지만, 앱을 더 빨리 보고 인터랙션 할 수 있다.

장점

1. 초기 로드 속도 최적화

2. 코드 스플리팅

3. 사용자 경험 UX 향상

4. 리소스 효율성

단점

1. 동적 로드 시 지연 가능성

2. 코드 복잡도 증가

3. SEO 문제
• 동적로드된 콘텐츠는 검색 엔진이 크롤링하지 못할 수 있음 ⇒ SSR 또는 프리렌더링을 결합해야 함

When?

• 대규모 애플리케이션 : 여러 페이지와 기능이 있는 애플리케이션에서, 페이지별로 코드 분리하여 로드

• 사용 빈도가 낮은 기능

• 제3자 라이브러리 : 무거운 라이브러리

• 동적 콘텐츠

Static Import vs Dynamic Import