React 라우터 Lazy 로드 경로 구성 요소

성능 최적화는 효율적으로 작동하는 응용 프로그램의 핵심이며 응용 프로그램의 다양한 메트릭을 모니터링 및 분석하고 개선 방법을 식별하여 수행됩니다. 가장 기본적이고 중요한 방법 중 하나는 사용자 요구 사항에 따라 경로/페이지를 느리게 로드하고 처음에 전체 청크를 가져오지 않는 것입니다. 이로 인해 페이지 로드 시간이 길어져 사용자 이탈 횟수가 증가할 수 있습니다.

모범 사례를 위해 웹 개발자 코드는 큰 번들을 더 작은 번들로 분할합니다. 요청 시 파일을 지연 로드하고 React 애플리케이션의 성능을 향상할 수 있기 때문입니다. 이 게시물에서는 React Router을 사용하여 경로를 기반으로 코드를 분할하는 방법을 살펴보겠습니다. 아이디어는 간단합니다. 사용자가 필요로 할 때까지 코드를 다운로드하지 마세요. 아래 예제는 간단한 상용구 예제입니다. 실제로는 조금 더 복잡할 수 있습니다.

충분한 이론으로 뛰어 들자 ...

종속성을 설치합니다.

yarn add react-router-dom@6

래핑 앱 구성 요소:

파일 상단 근처에 있는 react-router-dom에서 BrowserRouter을 가져오고 애플리케이션 전체에서 필요한 모든 라우팅 방법을 사용할 수 있도록 로 래핑합니다.

파일: main.tsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import App from './App';
import './index.css';

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

경로 구성 만들기:

이 구성은 경로 이름, 느리게 로드할 요소/구성 요소 및 경로와 같은 경로에 필요한 모든 매핑을 보유합니다. 여기서 우리는 useRoutes 후크를 사용하고 있으며 기본적으로 <Routes> 와 기능적으로 동일합니다.

파일: routes/index.ts

import { useRoutes } from 'react-router-dom';
import { lazyLoadRoutes } from './LazyLoadRoutes';

export function RouterElement() {
  const routes = [
    {
      path: '/',
      name: 'Home',
      element: lazyLoadRoutes('Home'),
    },
    {
      path: 'about',
      name: 'About',
      element: lazyLoadRoutes('About'),
    },
    {
      path: 'services',
      name: 'Services',
      element: lazyLoadRoutes('Services'),
    },
  ];

  return useRoutes(routes);
}

지연 로드 구성 요소:

이름에서 알 수 있듯이 이 구성 요소의 주요 목적은 언급된 구성 요소를 느리게 로드하는 것입니다. 먼저 React.lazy을 사용하여 언급된 구성 요소를 지연 로드하고 대체 텍스트(이것은 로더 구성 요소일 수도 있음)로 둘러쌉니다React.Suspense. 구성 요소 이름뿐만 아니라 경로를 사용하도록 함수 구성 요소를 조정할 수 있습니다.

파일: routes/LazyLoadRoutes.tsx

import { lazy, Suspense } from 'react';

/**
 * Lazily load the mentioned component which resides in the page directory
 * This method will be used in routes so that the files are loaded only
 * When users are on that route
 */
export function lazyLoadRoutes(componentName: string) {
  const LazyElement = lazy(() => import(`../pages/${componentName}.tsx`));

  // Wrapping around the suspense component is mandatory
  return (
    <Suspense fallback="Loading...">
      <LazyElement />
    </Suspense>
  );
}

경로 리디렉션용 탐색 표시줄:

홈, 정보 및 서비스인 페이지에 대한 탐색 경로를 생성합니다.

파일: App.tsx

import { Link } from 'react-router-dom';
import { RouterElement } from './routes';
import './App.css';

function App() {
  return (
    <div className="App">
      <nav>
        <Link to="/">Home</Link>
        <Link to="about">About</Link>
        <Link to="services">Services</Link>
      </nav>
      <RouterElement />
    </div>
  );
}

export default App;

작업 예제 링크:

아래에서 볼 수 있듯이 정보 및 서비스에 대한 청크는 해당 경로를 방문할 때만 로드되며 청크는 동일한 세션에서 다시 가져오지 않도록 브라우저에 캐시됩니다.





아래 의견에 다른 멋진 방법이 있는지 알려주십시오.
읽어주셔서 감사합니다. 당신이 그것을 좋아한다면 몇 가지 ❤️ 또는 🦄를 떨어 뜨립니다.