코드 분할을 사용하여 React 앱의 성능을 향상시키는 방법

React 애플리케이션의 크기와 복잡성이 증가함에 따라 JavaScript 번들의 크기는 특히 느린 네트워크나 장치에서 성능에 큰 영향을 미칠 수 있습니다. 이 문제를 완화하는 효과적인 방법 중 하나는 애플리케이션을 더 작은 덩어리로 나누는 기술인 코드 분할을 이용하는 것입니다. 이러한 청크는 요청 시 로드되어 초기 로드 시간을 줄이고 전반적인 성능을 향상시킵니다.

이 글에서는 코드 분할이 무엇인지, 왜 중요한지, React 앱에서 이를 효과적으로 구현하는 방법을 살펴보겠습니다.

코드 분할이란 무엇인가요?
코드 분할은 JavaScript 코드를 필요할 때 동적으로 로드할 수 있는 더 작은 묶음으로 나누는 데 사용되는 전략입니다. 하나의 큰 JavaScript 파일을 브라우저에 전달하는 대신 코드 분할을 사용하면 사용자 상호 작용에 즉시 필요한 코드 부분만 보낼 수 있습니다. 이렇게 하면 앱의 초기 로드 시간이 단축됩니다.

React는 동적 가져오기 및 Webpack과 같은 도구를 사용하여 코드 분할을 활성화합니다.

코드 분할의 이점

1. 초기 로드 시간 단축: 중요한 코드만 미리 로드됩니다.
2. 향상된 성능: 특히 느린 네트워크에서 작은 번들이 더 빠르게 로드됩니다.
3. 효율적인 리소스 사용: 필요에 따라 리소스를 로드하여 사용되지 않는 코드를 최소화합니다.
4. 더 나은 사용자 경험: 사용자는 앱과 더 빠른 상호 작용을 경험합니다.
5. React에서 코드 분할 구현

1. React의 React.lazy와 Suspense 사용하기
React는 구성 요소를 느리게 로드하는 React.lazy와 지연 로드된 구성 요소를 가져오는 동안 대체 UI를 표시하는 Suspense를 제공합니다.

예:
1단계: 구성 요소 지연 로드

import React, { Suspense } from 'react';

// Lazy load the component
const LazyLoadedComponent = React.lazy(() => import('./LazyLoadedComponent'));

function App() {
  return (
    <div>
      <h1>React Code Splitting Example</h1>
      <Suspense fallback={<div>Loading...</div>}>
        <LazyLoadedComponent />
      </Suspense>
    </div>
  );
}

export default App;

설명:

• React.lazy(() => import('./LazyLoadedComponent')): 필요할 때만 구성 요소를 동적으로 가져옵니다.
• <서스펜스 대체={
  로드 중...
  }>: 구성요소가 로드되는 동안 대체 UI(예: 로딩 스피너)를 표시합니다.

2. 경로별 코드 분할
대규모 애플리케이션의 경우 경로별로 코드를 분할하는 것이 성능을 향상시키는 가장 효과적인 방법 중 하나입니다. React Router와 같은 라이브러리는 이 프로세스를 원활하게 만듭니다.

1단계: React Router 설치

import React, { Suspense } from 'react';

// Lazy load the component
const LazyLoadedComponent = React.lazy(() => import('./LazyLoadedComponent'));

function App() {
  return (
    <div>
      <h1>React Code Splitting Example</h1>
      <Suspense fallback={<div>Loading...</div>}>
        <LazyLoadedComponent />
      </Suspense>
    </div>
  );
}

export default App;

2단계: 경로를 사용하여 코드 분할 구현

npm install react-router-dom

혜택:

• 활성 경로에 대한 JavaScript만 로드됩니다.
• 초기 번들의 크기를 줄입니다.

3. Webpack의 동적 가져오기 사용
Webpack을 모듈 번들러로 사용하는 경우 기본적으로 동적 가져오기를 지원합니다. Webpack은 코드를 동적으로 로드할 수 있는 덩어리로 나눕니다.

React 앱에서 사용하는 방법은 다음과 같습니다.

예:

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

// Lazy load components for routes
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...</div>}>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
          <Route path="/contact" component={Contact} />
        </Switch>
      </Suspense>
    </Router>
  );
}

export default App;

작동 방식:

• Webpack은 HeavyComponent에 대해 별도의 청크를 생성합니다.
• 청크는 loadComponent()가 호출될 때만 로드됩니다.

4. Webpack 번들 분석기로 번들 분석
코드 분할을 구현하기 전에 번들 크기에 영향을 미치는 요소를 이해하는 것이 중요합니다. Webpack은 번들의 내용을 시각화하기 위해 Bundle Analyser라는 도구를 제공합니다.

1단계: Webpack 번들 분석기 설치

function loadComponent() {
  import('./HeavyComponent')
    .then((module) => {
      const Component = module.default;
      // Use the component here
    })
    .catch((error) => {
      console.error('Error loading the component:', error);
    });
}

2단계: Webpack 구성
Webpack 구성에 플러그인을 추가하세요.

npm install --save-dev webpack-bundle-analyzer

3단계: 번들 분석

보고서를 생성하려면 빌드 명령을 실행하세요.

const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin(),
  ],
};

분석기는 각 모듈의 크기를 보여주는 트리 맵을 표시하여 최적화 기회를 식별하는 데 도움을 줍니다.

5. 코드 분할과 함께 타사 라이브러리 사용
대규모 타사 라이브러리(예: lodash, moment.js)는 번들 크기를 부풀릴 수 있습니다. 이러한 라이브러리를 별도의 청크로 분할하거나 트리 쉐이킹을 사용하여 라이브러리의 사용되지 않는 부분을 제거할 수 있습니다.

예: 라이브러리에 대한 동적 가져오기

npm run build

나무 흔들기 예:
전체 라이브러리를 가져오는 대신:

import('lodash')
  .then((_) => {
    const uniq = _.uniq([1, 2, 2, 3]);
    console.log(uniq);
  })
  .catch((error) => {
    console.error('Error loading lodash:', error);
  });

코드 분할 모범 사례

1. 경로 기반 분할로 시작: 초기 로드 시간을 줄이는 가장 쉽고 효과적인 방법입니다.
2. 과도한 분할 방지: 청크가 너무 많으면 과도한 HTTP 요청이 발생할 수 있습니다.
3. 코드 분할과 지연 로딩 결합: 현재 사용자 상호작용에 필요한 것만 로드합니다.
4. 성능 모니터링: Lighthouse와 같은 도구를 사용하여 코드 분할 구현 후 개선 사항을 측정합니다.
5. 최신 빌드 도구 사용: Webpack, Vite, Parcel과 같은 도구는 코드 분할을 기본적으로 지원합니다.

결론
코드 분할은 React 애플리케이션의 성능을 대폭 향상시킬 수 있는 강력한 최적화 기술입니다. 앱을 더 작은 단위로 나누고 필요할 때 로드하면 초기 로드 시간을 줄이고 사용자 경험을 개선하며 앱 효율성을 높일 수 있습니다.

경로 기반 분할로 시작한 다음 구성 요소 수준 또는 라이브러리 수준 분할을 실험하여 앱의 요구 사항에 맞게 최적화하세요. 코드 분할을 지연 로딩 및 트리 쉐이킹과 같은 다른 성능 기술과 결합하여 React 앱의 효율성을 극대화하세요.

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