reactjs의 코드 분할 소개.

소개

다양한 구성 요소와 해당 페이지에 대한 경로가 있는 페이지가 있는 애플리케이션이 있다고 상상해 보십시오. 따라서 애플리케이션을 실행할 때 콘텐츠를 로드하거나 표시하는 데 많은 시간이 걸립니다. 그래서 문제가 무엇이며 어떻게 해결할 수 있습니까?

이때 코드 분할이 발생하여 해당 특정 순간에 웹 페이지에 표시되는 구성 요소만 가져오는지 확인합니다. 예를 들어 Homepage 구성 요소와 AboutUs 구성 요소가 있는 경우입니다. 루트 경로에 있을 때 홈페이지 구성 요소가 표시됩니다. 하지만 초기 로드 시 가져오기 때문에 사이트 로드 시간이 오래 걸리고 결국 시청자를 잃게 됩니다.

예제 사이트를 살펴보고 단 몇 줄의 코드로 코드 분할을 수행하는 방법을 살펴보겠습니다.

시작하자:

fork 또는 clone(별표를 줄 수도 있습니다 😀)this GitHub의 repo는 반응을 사용하여 빌드된 단일 페이지 애플리케이션입니다. 구성 요소의 아무 곳에나 코드 침을 적용할 수 있습니다. 예를 들어 타사 라이브러리를 가져오는 경우입니다. 그러나 식별하기 더 쉬운 곳은 라우팅 규칙을 작성하는 경로 수준입니다.
저장소에서 복제하여 /로 이동하여 모든 경로를 확인합니다.

PricingPage.js 구성 요소를 렌더링하는 /about라는 경로가 있으며 이 특정 구성 요소를 분할합니다.

그러나 코드 분할을 적용하기 전에 브라우저가 무엇을 가져오거나 로드하려고 하는지 살펴보겠습니다.

앱 시작
앱을 시작하려면 아래 명령을 실행합니다(반응 지식이 있다고 가정).

$ npm install
$ npm start 

앱은 http://localhost:3000에 게시되어야 합니다.

Chrome 개발 도구에서 네트워크 탭을 열고 js를 필터로 선택하면 초기 페이지 로드에서 브라우저가 bundel.js를 가져오는 것을 볼 수 있습니다.
여기에서 react는 애플리케이션에 작성된 모든 자바스크립트를 이 파일로 가져옵니다(모든 구성 요소 포함).
인덱스 페이지에 모든 js가 포함되어 있습니다.
결과적으로 페이지 로드가 느립니다. 해당 번들에 포함되지 않도록 일부 구성 요소를 제외하고 대신 필요한 경우에만 가져올 것입니다. 여기에서는 누군가가/pricing으로 이동할 때입니다.

최신 버전의 React는 이를 달성하기 위해 /src/MainComponent.js 및 /pricing 두 가지 조합을 사용합니다.

MainComponent.js의 코드를 아래 코드로 바꿉니다.

import React, { Component, Suspense, lazy } from 'react';
import { BrowserRouter, Route } from 'react-router-dom';
import HomePage from './HomePage';
import ProductDetailsPage from './ProductDetailsPage';
import HowItWorks from './HowItWorks';

const PricingPage = lazy(() => import('./PricingPage'));

class MainComponent extends Component {
    render() {
        return (
            <Suspense fallback={<h1>Loading.....</h1>}>
                <BrowserRouter>
                    <Route exact path='/' component={HomePage} />
                    <Route
                        exact
                        path='/products/:productId'
                        component={ProductDetailsPage}
                    />
                    <PricingPage exact path='/pricing' />
                    <Route exact path='/working' component={HowItWorks} />
                </BrowserRouter>
            </Suspense>
        );
    }
}

export default MainComponent;

이제 네트워크 탭으로 돌아가 소스를 확인하면 Suspense로 이동하면 1.chunk.js 파일이 하나 더 표시됩니다.React.lazy 구성 요소만 포함합니다.

또한 npm run build를 수행하면 코드 분할을 사용하지 않는 경우 번들링과 달리 구성 요소를 별도로 빌드합니다. 아래는 code-spitting 적용 전과 후의 빌드 로그 로그입니다.

File sizes after gzip:

  76.03 KB  build/static/js/2.d23bfa23.chunk.js
  28.43 KB  build/static/js/main.b229bef3.chunk.js
  770 B     build/static/js/runtime-main.e43a4c19.js
  306 B     build/static/css/main.0fc1fc64.chunk.css

File sizes after gzip:

  76.03 KB (-2 B)    build/static/js/2.8bab3079.chunk.js
  28.07 KB (-368 B)  build/static/js/main.b6b9360c.chunk.js
  1.18 KB            build/static/js/3.58e0fecc.chunk.js
  1.16 KB (+418 B)   build/static/js/runtime-main.01e4ec24.js
  306 B              build/static/css/main.0fc1fc64.chunk.css

보시다시피 PricingPage 구성 요소에 대한 js라는 추가 파일이 하나 있으며 가격 구성 요소가 제외되어 다른 파일의 크기가 줄어드는 것을 볼 수 있습니다.

그리고...그게 마무리입니다. 반응 앱을 분할하는 방법을 배웠기를 바랍니다. 이제 동일한 접근 방식을 애플리케이션에도 적용할 수 있습니다.
내부적으로 webpack을 사용하는 create-react-app 템플릿인 react-router를 사용한 코드 분할을 살펴보았지만 소포, 바벨 등에 동일하게 적용할 수 있습니다.

게시물이 마음에 드셨나요?