Lazy Loading을 사용하여 React App 성능을 높이는 방법은 무엇입니까?

my blog에 원래 게시됨

이미 아시다시피 React는 사용자 인터페이스를 구축하기 위한 JavaScript 라이브러리입니다. 그리고 React 앱을 개발할 때 마지막에 하나의 파일로 번들될 많은 구성 요소를 빌드합니다. 파일 및 타사 라이브러리의 크기에 따라 건물 부분이 축소하고 크기를 줄이더라도 정말 클 수 있습니다.
그러나 해당 번들 크기는 Lazy Loading이라는 기술을 사용하여 다시 최적화할 수 있습니다.

이 튜토리얼에서는 Lazy Loading을 사용하여 React App 성능을 높이는 방법을 배웁니다.

전제 조건

이 자습서에서는 React 및 React Router에 대한 기본에서 중간 수준의 지식이 최소한 있다고 가정합니다. Lazy Loading 부분에만 집중하겠습니다.

React Router를 시작해야 하는 경우 이tutorial가 도움이 될 수 있습니다. 그렇지 않으면 전제 조건을 수행해 보겠습니다.

따라하려면 터미널에서 실행하여 프로젝트의 repo을 복제해야 합니다.

git clone https://github.com/ibrahima92/prep-react-lazy-loading

그리고 터미널에서 npm install를 실행하여 종속성을 설치합니다.

그런 다음 전제 조건을 완료했으면 구성 요소를 느리게 로드해 보겠습니다.

지연 로딩이란 무엇입니까?

지연 로딩 또는 코드 분할은 코드 청크의 로딩을 연기하는 기능입니다. 즉, 페이지가 로드될 때 모든 코드를 번들로 묶어 로드하는 대신 필요한 코드만 로드되고 일부 부분은 필요할 때마다 로드됩니다.

지연 로딩은 언제 필요합니까?

코드 분할은 중간 크기에서 더 큰 React 앱에 유용합니다. 일부 중간 크기 앱에서도 지연 로딩이 필요하지 않습니다.

대부분의 사용자가 방문하지 않는 앱의 일부가 있는 경우 번들 크기를 늘리는 대신 느리게 로드하여 앱의 성능을 저하시키는 것이 좋습니다.

이 작은 프로젝트에서 게으른 로딩은 솔직히 말해서 과잉이지만 미니 프로젝트로 이러한 종류의 작업을 수행하는 방법을 배우는 것이 항상 훨씬 간단합니다.

이제 구성 요소를 느리게 로드해 보겠습니다.

구성 요소를 지연 로드하는 방법은 무엇입니까?

React 16.6 이전에는 HOC(Higher-Order Component) 또는 라이브러리를 사용하여 Lazy 로딩이 수행되었습니다. 이제 React lazy 및 React Suspense를 사용하면 구성 요소를 느리게 로드하는 것이 훨씬 쉬워집니다. 그러나 React Lazy는 명명된 내보내기 및 서버 측 렌더링을 지원하지 않습니다.

코드 분할이 고급 개념이며 일부 번들러는 이를 지원하지 않는다는 사실을 아는 것도 좋습니다. create-react-app는 정말 훌륭하고 현대적인 구성을 가지고 있으므로 최대한 사용하십시오.

따라서 App.js 파일을 약간 업데이트하여 실제로 작동하는지 살펴보겠습니다.

인 App.js

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

import NavBar from './components/NavBar';
import Posts from './components/Posts/Posts';
const Users = lazy(() => import('./components/Users/Users')) 

function App() {

  return (
    <BrowserRouter>
      <main>
      <NavBar />
      <Switch>
        <Route exact path="/" component={Posts}  />
        <Route path="/users" render={() =>
          <Suspense fallback={<h1>Loading....</h1>}>
            <Users />
          </Suspense>
        }/>
      </Switch>
      </main>
    </BrowserRouter>
    );
}

export default App;

여기에서 볼 수 있듯이 React 라이브러리에서 lazy 및 Suspense를 가져오는 것으로 시작합니다. 그런 다음 Users 구성 요소를 가져오는 대신 lazy를 사용하여 이를 연기하고 필요할 때 동적으로 필요한 구성 요소를 가져올 수 있습니다.

이러한 변경과 Suspense의 도움으로 이제 React Router에서 제공하는 render 소품을 사용하여 가져온 구성 요소를 표시하고 로드하는 데 시간이 걸리는 경우 fallback를 사용하여 로딩 메시지를 표시할 수 있습니다. .

그런데 fallback 속성의 경우 간단한 메시지에 제한되지 않고 스피너 구성요소, 로딩 표시기 등을 사용할 수 있습니다.

이제 변경된 사항을 확인하려면 브라우저 개발자 도구를 열고 Network 탭을 확인한 다음 Users 페이지를 클릭하면 새로운 데이터 청크가 로드되는 것을 볼 수 있습니다.



이러한 변경으로 이제 React Lazy 및 React Suspense를 사용하여 구성 요소를 느리게 로드했습니다.

결론

Lazy Loading은 React 앱의 성능을 향상시키는 좋은 방법입니다. 어떤 경우에는 정말 유용하고 확실히 알고 사용해야 하지만 필요하지 않을 때 사용하면 성능 문제가 발생할 수 있습니다.



BLOG
NEWSLETTER
GITHUB

CODEPEN



사진 제공: Kate Stone Matheson on Unsplash