[원티드 프리온보딩] 포트폴리오 작성을 위한 리액트 프로젝트 고도화 - 3회차

오늘의 Agenda는

성능과 최적화!

 

Lighthouse

: 웹 성능을 분석하는 오픈 소스

성능 분석, 접근성 검사, SEO 평가, PWQ 기준 평가를 제공합니다.

Lighthouse는 개발자 도구(F12)에서 찾을 수 있습니다

Ligthhouse 페이지 로드를 분석하기 위해,

[ 중복 모듈 제거 → 빌드 → 시크릿 모드 실행 → Lighthouse 실행 ] 순서로 실행합니다.

$ npm dedupe

: npm 패키지 매니저에서 중복된 의존성을 줄이는 명령어
node_modules 디렉토리에서 중복된 모듈을 제거해 프로젝트 크기를 줄입니다.
( yarn을 사용하시면, 자체적으로 의존성 해결 및 트리구조를 효율적으로 관리해 중복된 모듈을 최소화한다고 합니다) 

 

$ yarn build

production build시 [ Minification, Tree shaking ] 등 최적화가 진행되어 web vital이 상당 부분이 개선됩니다.
Minification : 빈칸, 줄바꿈 등을 제거 / Tree shaking : 프로젝트에서 사용하는 코드 중 실행되지 않는(unused) 코드 제거
→ 번들을 줄임 => 소스 코드의 크기를 줄이고, 전송 시 발생하는 대역폭 절약 및, 브라우저 파싱 속도 향상

 

$ yarn global add serve

production build로 빌드된 결과물을 확인하려면, serve와 같은 '정적 파일 서버'를 사용합니다.
그래서 serve를 전역으로 설치합니다.

 

$ serve -s build

위 명령어로 빌드된 정적 파일을 서빙
※ 인식되지 않는다면, $ yarn global bin  으로 경로를 확인하고, 해당 경로를 환경 변수 'PATH'에 추가합니다.
저는 그냥.. $ <global-bin-path>/serve -s build로 했습니다..ㅎ

크롬 브라우저에서 localhost:3000 접속!

 

그리고 [ 시크릿 모드, 확장 프로그램 끄기 ] 

그렇게 나온 성능은~!~!~!~!

에..? 실화인가요..?😂

물론, 아직 개발이 마무리되지 않기도 했지만 이 정도.. 일 줄은... 😅

오히려 잘됬습니다.😋

처음부터 성능이 좋았더라면, 개선할 기회도 없었겠죠!

이제부터 성능을 높이는 일만 남았습니다!!🤩

 

FCP(First Contentful Paint) : 페이지에 첫번째 콘텐츠가 표시되기 시작하는 시점을 측정 사용자가 페이지의 어떤 부분이 로드되고 있는지 인지할 수 있는 시간 개선 방법 이미지 최적화 , Lazy Loading, CSS & Javascript 최적화	SI(Speed Index) : 페이지가 얼마나 빨리 로드되더 화면에 나타나는지 측정 개선 방법 이미지 최적화, 캐싱 활용, CDN 활용 CDN 활용 : 콘텐츠를 더 빠르게 전송하기 위해 Content Delivery Network를 사용
TBT(Total Blocking Time) : 페이지 로딩 중에 사용자 입력에 대한 응답이 차단되는 총 시간을 측정 개선 방법 비동기 스크립트 로드, CSS 최적화, 서버 리소스 최적화	LCP(Largest Contentful Paint)  : 페이지의 가장 큰 콘텐츠가 화면에 표시되기 시작하는 시간을 측정 개선 방법 이미지 최적화, Lazy Loading , 캐싱 활용, CDN 활용

 

위의 배운내용을 바탕으로..!

문제를 해결하여, 좋은 성능을 가진 애플리케이션을 만들어보도록 하겠습니다!

 

 

메모

Profile - Commit Time, Render Painting 조사하기

"react-router-dom routerConfig에 lazy loading" 적용해보기