React 앱의 성능을 최적화하는 도구

React는 기본적으로 코드에 대한 많은 최적화를 제공하지만 그럼에도 불구하고 React 앱의 성능을 적절하게 평가하고 최적화하는 것이 중요합니다.

이러한 도구는 개발 과정에서 응용 프로그램을 최적화하는 데 가장 유용하다는 것을 알았습니다.

1. 등대

페이지를 마우스 오른쪽 버튼으로 클릭하고 Inspect를 클릭하여 개발자 도구를 열고 >>를 클릭하면 탭에 아직 표시되지 않은 경우 Lighthouse를 찾을 수 있습니다.

Lighthouse는 Performance , Accessibility , Best Practices 및 SEO 를 평가하여 해당 웹사이트에 대한 보고서를 생성합니다.

2. 프로파일러

프로파일러를 사용하기 전에 개발 도구 확장 프로그램이므로 Chrome 웹 스토어에서 설치React Developer Tools해야 합니다.

설치하면 개발자 도구에서 Profiler를 볼 수 있습니다. 브라우저가 보이지 않으면 닫았다가 다시 엽니다.



시작하려면 record 아이콘을 누르고 페이지를 변경한 다음 record 아이콘을 다시 눌러 중지합니다.



프로파일러는 페이지에 렌더링된 모든 구성 요소에 대한 분석과 각 구성 요소가 렌더링되는 데 걸리는 시간을 제공합니다.

3. Webpack 번들 분석기

Webpack Bundle Analyzer는 번들 콘텐츠의 대화형 트리맵 시각화를 생성하는 도구입니다.

상당한 양의 스토리지를 차지하는 종속성을 식별할 수 있습니다. 위의 예에서는 프로젝트에 대해 전체lodash 라이브러리를 가져왔습니다. 번들 크기를 줄이기 위해 lodash 패키지에 트리 쉐이킹을 도입할 수 있습니다. 기본적으로 필요한 기능만 설치합니다.

전에:

import _ from "lodash";

const object = { 'a': 1, 'b': '2', 'c': 3 };
const omittedObj = _.omit(object, ['a', 'c']);

return omittedObj;

후에:

import omit from "lodash/omit";

const object = { 'a': 1, 'b': '2', 'c': 3 };
const omittedObj = omit(object, ['a', 'c']);

return omittedObj;

읽어 주셔서 감사합니다! 지속 가능하고 신뢰할 수 있는 코드를 작성하는 데 확실히 도움이 되므로 이러한 기술과 관행을 프로젝트에 통합하기를 바랍니다.