반응: 코드 분할

안녕하세요 여러분! 최근에 나는 복잡한 다중 모듈 반응 앱을 작업하고 있었고 또한 타사 라이브러리에 대한 많은 종속성을 가지고 있습니다. 따라서 일부 구성 요소의 로딩 시간이 예상보다 길었고 번들의 크기가 다른 부분이었습니다.

모든 웹 애플리케이션은 응답 시간이 가능한 한 가장 낮고 번들 크기가 작을수록 빌드 시간이 단축되고 저장 공간이 절약되는 경우에만 사용자가 액세스할 수 있고 친근할 것입니다.

번들링은 가져온 모든 모듈을 단일 파일로 병합하는 프로세스입니다. 종속성의 크기가 작을 때는 번들링이 좋지만 종속성이 커짐에 따라 단일 파일에서 병합하는 것이 문제입니다. 여기서 코드 분할은 그림으로 제공됩니다. 코드 분할은 Webpack에서 지원하는 기능이며 code-react-app으로 사전 구성되어 제공됩니다.

코드 분할

애플리케이션에 필요한 항목만 레이지 로드하여 애플리케이션 로드 시간을 단축하는 프로세스입니다. 코드 분할을 사용하면 필요하지 않은 코드가 로드되지 않으며 초기 빌드에서 코드 크기가 더 작아집니다.

동적 가져오기

let sortedString = import('./StringUtils')
    .then(StringUtils=>{
        StringUtils.sort(str)
    })
    .catch(err=>{
    //handles error
   })

예제에서 StringUtils 모듈은 이 코드 전에 가져오지 않으며 번들 크기가 더 작습니다. webpack이 이 구문을 만나면 자동으로 코드 분할을 시작합니다.

React.lazy

동적 가져오기를 일반 구성 요소로 렌더링할 수 있습니다. 구성 요소가 포함된 번들을 처음 렌더링할 때 자동으로 렌더링합니다.
let UtilsComponent = React.lazy(()=>import('./StringUtils'))
React.lazy는 모듈을 가져오는 입력으로 함수를 사용하고 구성 요소에 대한 기본 내보내기가 있는 모듈로 확인되는 약속을 반환합니다.

리액트.서스펜스

React.suspense는 게으른 구성 요소가 렌더링되기를 기다릴 때까지 대체 구성 요소를 보여주는 게으른 구성 요소를 렌더링하는 데 사용됩니다.

import React, { Component, Suspense } from 'react'

export default class Statics extends Component {
  render() {
    let RandomColor = React.lazy(()=>import('./RandomColor'));
    return (
      <div>
        <Suspense fallback={<div>Loading....</div>}>
          <RandomColor/>
        </Suspense>
      </div>
    )
  }
}

React.Suspense의 fallback 소품은 지연 구성 요소가 로드될 때까지 표시될 모든 구성 요소를 사용합니다.

그래서 여기서 우리는 두 가지 문제를 모두 해결했습니다. 필요할 때만 구성 요소를 동적으로 가져오기 때문에 번들 크기가 더 작습니다. 구성 요소를 동적으로 가져오기 때문에 번들 크기가 작기 때문에 로드 시간도 짧습니다.

오늘은 여기까지, 그때까지 해피코딩!..