[TIL] 한정된 자원에서의 프론트엔드

프론트엔드 개발에 있어 리소스가 제한된 상황은 얼마든지 발생할 수 있다. 

리소스란 네트워크, 서버, 클라이언트 등 더 나아가서 브라우저의 메모리,CPU 사용량,네트워크 대역폭 등을 의미한다. 

 

 

 

코드 최적화- 코드 분할

대부분 리액트 앱은 웹팩,롤업,브라우저파이와 같은 툴을 이용하여 여러 파일을 하나로 병합하고 번들 된 파일을 웹페이지에 포함하여 한 번에 전체 앱을 로드한다.

이는 앱의 크기를 키우고 무겁게 만든다. 비대한 번들을 방지하는 해결 방법중 하나가 코드 분할이다.

 

import() :동적 임포트 

웹팩에서는 위 구문을 만나면 앱의 코드를 분할한다.

해당 함수는 모듈을 동적으로 불러와 결과를 프로미스로 반환한다. 

주로 lazy()와 같이 사용된다.

 

코드 최적화 - 트리쉐이킹

사용하지않는 코드를 제거한다. 

먼저 바벨에서 commonjs로 변환하지 못하게 막고(웹팩으로 호환성 문제는 없다.)

웹팩의 부수효과를 false처리한다.

그리고 모든것이 아닌 필요한 것만 정적으로 import 한다.

 

이미지 및 멀티미디어 최적화

이미지 압축: Image-webpack-loader

적절한 포맷 활용: WebP

 

레이지 로딩

이미지 레이지로딩: 보이는 이미지만 로드

컴포넌트 레이지 로딩: 해당 컴포넌트가 필요한 시점에 동적으로 로드하는 방법을 말합니다. 이 방법은 웹 애플리케이션의 초기 로딩 속도를 향상시키고, 사용자 경험을 개선하는 데 도움을 줍니다.

 

캐싱 전략

1. http헤더를 이용한 캐싱 

Expires,Cache-Control,ETag 헤더

 

2.브라우저 저장소를 이용한 캐싱

localStorage,SessionStorage

 

3.서비스워커

 

서버 사이드 렌더링(SSR) 또는 정적 사이트 생성(SSG) 

SSR:초기 페이지 로드 시 서버에서 렌더링하여 로딩 시간을 줄입니다.

SSG: 빌드 시점에 페이지를 생성하여 로딩 시간을 줄입니다.

 

api호출 최적화

GraphQL 사용: 필요한 데이터만 요청하여 네트워크 사용을 줄입니다. 

데이터 페칭 최적화: 중복된 API 호출을 방지합니다.

 

웹페이지 크기 줄이기

 

css,js최소화: 파일크기를 줄여 공백과 주석을 제거 (minification)

- terser 등

외부 라이브러리 최적화: 필요한 부분만 import