React.lazy를 사용한 코드 분할: 앱 성능 향상

React에서 React.lazy를 사용한 코드 분할

코드 분할은 JavaScript 번들을 더 작은 덩어리로 나누어 React 애플리케이션의 성능을 최적화하는 기술입니다. React는 컴포넌트 수준에서 코드 분할을 구현하기 위한 내장 방법으로 React.lazy를 제공합니다. 이를 통해 필요할 때 애플리케이션의 일부를 동적으로 로드할 수 있습니다.

---

React.lazy에서 코드 분할이 작동하는 방식

1. 동적 가져오기: ES6 import()를 사용하여 구성 요소를 동적으로 로드합니다.
2. 작은 번들: 앱을 더 작은 번들로 나누어 초기 로드 시간을 줄입니다.
3. 비동기 로딩: 필요한 경우에만 구성 요소를 비동기적으로 로드합니다.

---

통사론

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

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

• React.lazy: 지정된 구성 요소를 동적으로 가져옵니다.
• 서스펜스: 구성요소가 로드되는 동안 대체 UI를 제공합니다.

---

예제 1: React.lazy를 사용한 기본 코드 분할

코드 분할 없이

import React from "react";
import HeavyComponent from "./HeavyComponent";

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

export default App;

이 접근 방식에서는 즉시 필요하지 않은 경우에도 전체 HeavyComponent가 기본 앱과 함께 번들로 제공됩니다.

코드 분할 사용

import React, { Suspense } from "react";

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

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

export default App;

이제 HeavyComponent는 렌더링될 때만 로드됩니다. 이렇게 하면 초기 번들의 크기가 줄어듭니다.

---

예제 2: 경로의 코드 분할

코드 분할은 React Router와 원활하게 작동하여 경로 구성 요소를 동적으로 로드합니다.

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"));
const Contact = React.lazy(() => import("./Contact"));

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

export default App;

이익:

• 각 경로 구성요소(Home, About, Contact)는 해당 경로에 접속해야만 로드됩니다.

---

예 3: 여러 구성요소 지연 로딩

논리적 분할을 사용하여 단일 앱에서 여러 구성 요소를 지연 로드합니다.

import React, { Suspense, useState } from "react";

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

function App() {
  const [showA, setShowA] = useState(false);
  const [showB, setShowB] = useState(false);

  return (
    <div>
      <button onClick={() => setShowA(true)}>Load Component A</button>
      <button onClick={() => setShowB(true)}>Load Component B</button>

      <Suspense fallback={<div>Loading...</div>}>
        {showA && <ComponentA />}
        {showB && <ComponentB />}
      </Suspense>
    </div>
  );
}

export default App;

---

React.lazy를 사용한 오류 처리

React는 실패한 가져오기에 대한 기본 오류 처리 기능을 제공하지 않습니다. 이러한 경우에는 오류 경계를 사용하여 처리할 수 있습니다.

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

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

---

코드 분할 모범 사례

1. 경로 또는 기능별로 분할: 앱을 경로나 주요 기능과 같은 논리적인 덩어리로 나눕니다.
2. 폴백을 최소화하세요: 스피너나 문자 메시지와 같은 가벼운 폴백 UI를 사용하세요.
3. 번들 크기 모니터링: Webpack 번들 분석기와 같은 도구를 사용하여 대형 구성 요소를 식별합니다.
4. 과도한 분할 방지: 청크 수와 성능 간의 균형을 유지합니다. 청크가 너무 많으면 HTTP 요청이 증가할 수 있습니다.

---

코드 분할을 향상시키는 도구

1. Webpack: 코드 분할을 위한 동적 가져오기를 지원합니다.
2. Vite: 빠른 빌드와 자동 코드 분할을 제공합니다.
3. React Router: 경로 기반 지연 로딩으로 쉽게 통합할 수 있습니다.
4. React Loadable: 지연 로딩에 대한 향상된 제어를 위한 타사 라이브러리입니다.

---

결론

React.lazy를 사용한 코드 분할은 앱 성능을 향상시키는 강력한 방법입니다. 구성 요소를 동적으로 로드하면 초기 로드 시간을 줄이고 사용자 경험을 향상할 수 있습니다. Suspense 및 적절한 오류 처리와 결합하면 효율적이고 확장 가능한 React 애플리케이션을 구축하기 위한 강력한 솔루션을 제공합니다.

---

위 내용은 React.lazy를 사용한 코드 분할: 앱 성능 향상의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!