반응을 보이다.lazy() - 모바일 성능 향상

문제.

새로운 React 프로그램을 만들 때, 자산을 불러올 때 모바일 연결이 아닌 데스크톱을 고려하도록 설정됩니다.크롬 라이트하우스 보고서를 실행하면 데스크톱 성능과 모바일 성능 사이의 큰 차이를 볼 수 있습니다.
개발자로서 핸드폰에서든 데스크톱에서든 우리는 응용 프로그램이 같은 체험을 하기를 희망합니다.
다행히도, 이것은 결코 실현하기 어렵지 않다.

무엇이 이 문제를 야기시켰는가

React에서 새 구성 요소를 보일 때, 자바스크립트 파일과 이 구성 요소에 포함될 수 있는 모든 가져오기를 가져오고 있습니다.
프로세스는 다음과 같습니다.

문제가 더욱 명백해졌다.
만약 우리가 두 개의 파일을 가지고 있다면: index.js과 App.js

// index.js
import App from './App.js'

console.log('Hello World!')

// App.js
import React, { Component } from 'react'
import SomeExtraClass from 'some-package'
import { func1, func2, func3 } from 'another-package'

console.log('Imported Packages!')

마지막으로 index.js을 실행하면 다음과 같은 콘솔 출력이 표시됩니다.

/> "Imported Packages"
/> "Hello World!"

이것은 우리가 가져온 파일의 사용 가능한 범위 내에 모든 코드를 두기 때문에, 우리가 코드를 가져올 때 문제가 발생하지만, 코드를 가져올 때, 이 코드들은 불필요하다.

왜 그것이 휴대전화에 영향을 줍니까?

우리가 응용 프로그램을 구축하고react의 정의에 따라 모바일 응용 프로그램에 비해 더 큰 화면 크기는 한 번에 페이지에 더 많은 구성 요소를 보여 줍니다.
이로 인해 백그라운드에서 어셈블리가 렌더링되고 기술 성능이 저하될 수 있습니다.사용자가 프로그램의 일부 내용을 불러오기를 기다리고 있기 때문에, 이 내용을 보거나 볼 필요가 없습니다.
많은 플러그인 구성 요소를 포함하는 대형 프로그램을 구축할 때 데스크톱과 모바일 장치의 성능에도 영향을 미칠 수 있음을 지적해야 한다.최종 사용자에게 더 많은 내용을 보여줄수록 프로그램을 불러오는 데 걸리는 시간이 길어집니다.
그렇다면, 우리는 어떻게 우선순위에 따라 페이지에 필요한 내용만 불러올 수 있습니까?
React.lazy 시청을 환영합니다.

반응을 보이다.게으르다

다행히도, React는 우리를 위해 React.lazy의 가방을 구축했다.
원한다면, 우리는react 라이브러리에서 명명 방법으로 lazy을 가져오거나, React.lazy()의 형식으로 그것을 호출할 수 있습니다.

React.lazy takes a function that must call a dynamic import(). This must return a Promise which resolves to a module with a default export containing a React component.

너무 좋아요. 그래서 우리는 현재 추가 구성 요소를 동적으로 가져와서 언제 표시할지 스스로 결정할 수 있습니다.
반응을 보이다.서버측 렌더링은 현재 lazy를 지원하지 않습니다.

React를 사용하여 코드 버스트를 수행합니다.게으르다

Code-Splitting is a feature supported by bundlers like Webpack, Rollup and Browserify (via factor-bundle) which can create multiple bundles that can be dynamically loaded at runtime. - reactjs.org

동적 불러오는 것은 파일을 분리할 수 있도록 합니다.귀속기 처리 프로그램은 새 파일을 불러올 때 서로 다른 절차를 사용하고, 이 파일들은 특정한 구성 요소에 불러옵니다.
런타임 관심사에 대한 이러한 분리는 우리로 하여금 응용 프로그램의 성능을 향상시킬 수 있게 한다.

걱정하다

이것은 비동기적으로 가져오는 것이기 때문에, 모든 내용을 불러오기를 기다리고 싶지 않습니다. 가져오는 데 필요한 몇 밀리초 안에 동시에 일을 할 수 있습니다.
Google은 약속이 해결될 때까지 DOM에 무엇을 보여야 하는지 설명하고 다른 구성 요소가 불러올 때까지 기다릴 수 있도록 합니다.감사합니다 React.lazy!

React 사용 방법게으르다

// App.js
import React, { Component, lazy, Suspense } from 'react'
const Header = lazy( () => import('./Header.js'))
const Body = lazy( () => import('./Body.js'))

class App extends Component {

   render() {
      return (
         <div>
            <Suspense fallback={<p>Loading...</p>}>
               <p>Loaded Page!</p>
               <Header/>
               <Body/>
            </Suspense>
         </div>
      )
   }
}

React는 다음과 같이 애플리케이션 구성 요소를 제공합니다.

좋은 점

현재, 우리는 비동기적으로 추가 구성 요소를 불러오고 있으며, 리셋 기능이 있어서, 구성 요소가 렌더링될 때까지 기다릴 필요가 없습니다.Dell의 first contentful paint은 예비(fallback) 기능으로 처리되며, React.lazy을 통해 로드되고 구성 요소가 업데이트될 때까지 기다릴 수 있습니다.
이것은 불러오는 시간을 몇 밀리 초만 줄일 수 있지만, 공백 구성 요소를 사용하지 않고, Loading... 또는 loading animation과 같은 내용을 표시하는 것이 좋습니다. 그리고 React가 되돌아와서 구성 요소가 렌더링을 준비한 후에 구성 요소를 업데이트할 수 있도록 합니다.

등대

React.lazy이 확실히 유효하다는 것을 증명하기 위해서, 우리는 기본적인 응용 프로그램을 사용하여 Lighthouse를 분석할 것이다.기계에서 테스트를 하려면 this repository에서 이 예시를 찾을 수 있습니다.

테이블

염려가 없다


걱정하다

휴대폰

염려가 없다

걱정하다

결론

React.lazy과 Suspense 구성 요소를 사용하여 우리는 리턴 렌더링 방법을 제공하여 사이트의 마운트 성능을 대폭 향상시킬 수 있다.
이것은 구성 요소가 사용자에게 실제로 나타날 때까지 렌더링을 처리할 것입니다.
데스크탑 성능보다 훨씬 향상된 모바일 성능!