React 프로젝트에서 지연 로딩 및 코드 분할 구현에 대한 단계별 가이드-JS 튜토리얼-php.cn

React 프로젝트에서 지연 로딩 및 코드 분할 구현에 대한 단계별 가이드

Patricia Arquette

풀어 주다： 2024-09-30 12:30:03

원래의

925명이 탐색했습니다.

Step by step guide to implementing lazy loading and code splitting in a React project

다음은 React 프로젝트에서 지연 로딩 및 코드 분할을 구현하는 방법에 대한 단계별 가이드입니다. 구성 요소를 느리게 로드하는 두 개의 경로가 있는 간단한 애플리케이션을 만들어 보겠습니다.

1단계: 새 React 앱 만들기

아직 생성하지 않았다면 Create React App을 사용하여 새 React 앱을 생성하세요.

npx create-react-app lazy-loading-example
cd lazy-loading-example

로그인 후 복사

2단계: React Router 설치

라우팅을 위해 React-Router-dom을 설치합니다.

npm install react-router-dom

로그인 후 복사

3단계: 지연 로딩 및 코드 분할 설정

구성요소 생성

src 디렉토리 안에 Components라는 폴더를 생성하세요.
구성 요소 내부에서 Home.js와 About.js라는 두 개의 파일을 만듭니다.

Home.js

import React from 'react';

const Home = () => {
  return <h2>Home Page</h2>;
};

export default Home;

로그인 후 복사

About.js

import React from 'react';

const About = () => {
  return <h2>About Page</h2>;
};

export default About;

로그인 후 복사

App.js 업데이트

이제 지연 로딩 및 라우팅을 구현하도록 App.js 파일을 수정하세요.

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

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

function App() {
  return (
    <Router>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
        </ul>
      </nav>

      <Suspense fallback={<div>Loading...</div>}>
        <Switch>
          <Route path="/about" component={About} />
          <Route path="/" component={Home} />
        </Switch>
      </Suspense>
    </Router>
  );
}

export default App;

로그인 후 복사