🚀 우아한테크코스/Level4

레벨4 프론트엔드 성능 베이스캠프 2 - 필요한 것만 요청하기

2023.10.08

프론트엔드 성능 베이스캠프의 두 번째 주제는 필요한 것만 요청하기이다. 간단하게 생각해서 당장 필요 없는 모듈은 불러오지 않다는 것이다. 이와 관련하여 구체적인 요구사항은 다음과 같다. Home 페이지에서 불러오는 스크립트 리소스에 gif 검색을 위한 giphy 모듈이 포함되어 있지 않아야 한다. react-icons 패키지에서 실제로 사용하는 아이콘 리소스만 빌드 결과에 포함되어야 한다. 이번 챕터에서는 이러한 요구사항을 만족하기 위해 작업한 과정을 다룬다. 1. 준비과정 빌드가 되었을 때 번들된 파일이 어떤 모습인지 먼저 확인해 보자. 눈으로 보면서 비교하는 것이 중요한데 이를 도와주는 것이 Webpack Bundle Analyzer라는 도구(플러그인)이다. 이를 통해 번들된 파일에 어떤 모듈이 얼마..

🚀 우아한테크코스/Level4

레벨4 프론트엔드 성능 베이스캠프 1 - 요청 크기 줄이기

2023.10.06

프론트엔드 성능 베이스캠프는 우아한테크코스 레벨 4 웹 성능 미션을 바탕으로 마주한 문제를 해결한 과정을 다룬다. 그중 첫 번째는 요청 크기 줄이기이다. 요청 크기라고 하면 다음과 같은 것들을 생각할 수 있다. 소스코드 이미지와 같은 assets 파일 폰트 이 중 소스코드와 이미지와 같은 assets 파일의 크기를 줄여보도록 한다. 성능 테스트에 사용되고 개선되는 코드는 여기에서 확인할 수 있다. 또한 해당 시리즈에서는 특별히 언급을 하지 않는 이상 성능 측정 환경은 dev 환경이다. 1. 소스코드 크기 줄이기 1-1. 기존 소스코드 크기 서비스를 실행하게 되면 bundle.js가 불러와진다. bundle.js 크기를 비교하기 전 package.json의 scripts를 다음과 같이 수정하자. { "sc..

레벨4 프론트엔드 성능 베이스캠프 2 - 필요한 것만 요청하기

레벨4 프론트엔드 성능 베이스캠프 1 - 요청 크기 줄이기

티스토리툴바