더 나은 성능을 위해 React Router로 동적 가져오기에 반응

동적 가져오기란 무엇입니까?

Dynamic Imports는 런타임에 동적으로 가져올 수 있는 방법을 제공합니다.

동적 가져오기를 사용하여 네트워크 페이로드 줄이기

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

import About from './components/About';
import Home from './components/Home';
import Main from './components/Main';
import Navbar from './components/Navbar';

function App() {
  return (
    <Router>
      <Navbar />
      <Routes>
        <Route path="/main" element={<Main />} />
        <Route path="/about" element={<About />} />
        <Route path="/" element={<Home />} />
      </Routes>
    </Router>
  );
}

CRA로 프로젝트를 설정했습니다. 라우터와 세 페이지가 있습니다.

빌드할 때 App, About, Home, Main, Navbar 파일을 모두 하나의 파일로 묶어야 합니다.

어느 페이지에 있든 처음 웹 사이트에 들어가면 모든 페이지가 포함된 번들 파일을 다운로드하게 됩니다.

앱이 느려지는 이유 중 하나가 되어야 합니다.

이 시점에서 dynamic imports를 사용하여 네트워크 트래픽을 줄일 수 있습니다.



번들 크기는 350kb 입니다. 이미 꽤 작지만 실제 세계에서는 클 것입니다.

생각해보자. 번들 크기가 메가 바이트라면 모바일로 접속하거나 인터넷 속도가 느린 사용자에게는 의심할 여지 없이 문제가 될 것입니다.
dynamic imports , React.lazy , React.Suspense 를 사용하겠습니다.

React.lazy 함수를 사용하면 동적 가져오기를 일반 구성 요소로 렌더링할 수 있습니다. docs

React.Suspense 구성 요소가 렌더링되기 전에 무언가를 "대기"할 수 있습니다.

런타임에 모듈을 가져오면 페이지의 js 파일이 런타임에 다운로드됩니다. 이는 사용자가 다운로드가 완료될 때까지 기다려야 함을 의미합니다. React.Suspense 로 로딩 화면을 렌더링할 수 있습니다.

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

import Navbar from './components/Navbar';
const About = lazy(() => import('./components/About'));
const Home = lazy(() => import('./components/Home'));
const Main = lazy(() => import('./components/Main'));

function App() {
  return (
    <Router>
      <Navbar />
      <Suspense fallback={<>loading...</>}>
        <Routes>
          <Route path="/main" element={<Main />} />
          <Route path="/about" element={<About />} />
          <Route path="/" element={<Home />} />
        </Routes>
      </Suspense>
    </Router>
  );
}

export default App;

이제 번들 크기가 줄었습니다.



페이지에 들어가면 페이지의 스크립트 파일이 다운로드되기 시작합니다.

결론

공연을 위해 dynamic imports를 사용하는 방법은 다양합니다. 나는 단지 사용법을 조금 다루었습니다. 나는 이것이 모든 React 프로젝트에서 실용적인 채택 중 하나일 수 있다고 생각했습니다. 도움이 되길 바랍니다.
공연에 즐겨 사용하는 방법이 있다면. 아래 댓글로 알려주세요.

감사합니다. 행복한 코딩 :)