환경
CRA로 작업하는 경우 개발은 development 환경에서 수행하는데 여기에서 performance는
Build하며 압축 등의 최적화 작업이 들어가지 않아 production으로 성능을 측정할 필요가 있어요.
손쉽게 production모드의 성능측정을 위해 npm serve를 사용할 수 있어요.
라이브러리 설치 후 package.json > scripts에 아래와 같은 명령어를 추가해요.
"serve": "npm run build && node ./node_modules/serve/bin/serve.js -u -s build",
node ./node_modules/serve/bin/serve.js -u -s build:
이 명령어는 빌드된 소스 코드를 로컬 웹 서버에서 실행시키는 역할을 합니다.
node 명령어는 Node.js 런타임을 실행시키는데,
여기에 ./node_modules/serve/bin/serve.js는 serve 패키지의 실행 파일 경로를 의미합니다.
-u 옵션은 압축하지 않는 설정입니다.
-s 옵션은 싱글 페이지 애플리케이션을 위한 설정을 활성화합니다.
build는 빌드된 소스 코드가 위치한 경로를 의미합니다.완료되면 아래와 같이 결과를 확인할 수 있는데요.
localhost:5000으로 접속해 개발자도구 > Network에서 파일크기를 확인하면 줄어든 부분을 확인할 수 있어요.
텍스트 압축
아래 이미지에서 Enable text compression을 보도록 할게요.
텍스트를 압축해서 받으면 아래와 같은 기대를 할 수 있어요.
- 다운로드 시간 0.44s 감소
- 파일크기 > 절약크기
- 444.5 KiB > 286.9 KiB
- 152.4 KiB > 104.4 KiB
- 15.9 KiB > 10.4 KiB
- 3.8 KiB > 2.0 KiB
HTML, CSS, JS와 같은 텍스트 형태의 파일을 압축해 리소스를 줄여 빠르게 다운로드하고
사용하는 시점에 압축을 해제하는 방법을 사용합니다.
압축이 되어있는지 확인하는 방법은 개발자도구 > Network > 파일을 클릭하면
아래 이미지 처럼 Response Headers를 확인할 수 있는데요.
표시한 부분인 Content-Encoding 부분이 존재하지 않으면 압축하지 않은거에요.
🧤압축 방식🧤
Gzip, De-flate 2가지가 대표적인 압축방식 인데요.
Gzip은 여러가지 기법이 추가되고 내부적으로 De-flate방식을 사용하여 더 좋은 압축률을 보인다고 해요.
압축을 적용하고 다시 확인하면 Content-Encoding이 추가된 것을 확인할 수 있어요.
