문제 : 배포하는 과정에 빌드가 너무 오래걸려요. 원인: PDF를 렌더링하기 위해 pdfjs-dist 라이브러리를 사용하고 있습니다. 이미지를 보면 node_modules/canvas/build 의 용량을 보면 상당히 많은 용량을 가지고 있으며, 많은 용량을 차지하는 canvas를 여러페이지에서 dependency를 가지고 생긴 이슈입니다. pdf를 렌더링하는 곳만 동적으로 모듈을 불러와 사용할수 있도록 dynamic import를 이용하여 성능최적화를 하였습니다. 11분에서 2분!!! dynamic import(동적 임포트)란 dynamic import란 자바스크립트에서 모듈을 피요한 시점에 동적으로 로드하는 기능을 말합니다. dynamic import(동적 임포트) 동작원리 동적 임포트 함수 호출 모..
웹 성능 결정 요소 로딩 성능 - 리소스를 로드 렌더링 성능 - 화면에 보여주는 Lighthouse는 웹 앱의 성능, 품질 및 정확성을 개선하기 위한 오픈 소스 자동화 도구입니다. 측정 결과는 로컬PC에서 검사를 진행하기 떄문에 PC에 환경에 영향을 받아 네트워크 및 CPU (또는 GPU) 등의 환경에 따라 검사 결과가 다를 수가 있습니다. 예시) CPU의 작업량에 여유가 있는 상태 vs CPU가 바쁘게 돌고 있는 상태(여러 프로그램을 띄워둔 상태) 미국에 있는 서버 홈페이지를 한국의 사용자가 검사할 때 vs 미국의 사용자가 검사할 때 웹서버에 트래픽이 많은 상황에서 검사를 했을 때 vs 트래픽이 없는 상황에서 검사를 했을 때 분석결과 First Contexntful Paint (FCP) 최초 콘텐츠풀 ..
