최적화기법
1. 최적화 기법이란?
2. 캐시관리
3. Tree Shaking
4. Light house
1. 최적화 기법
2. 캐시 관리
캐시란? 다운로드 받은 데이터나 값을 미리 복사해 놓는 임시 장소이다. 데이터에 접근하는 시간이 오래 걸리는 경우나 값을 다시 계산하는 시간을 절약하고 싶은 경우에 사용한다.
예를 들어, 서버에 이미지를 요청하는 경우, 캐시를 사용하지 않는다면 서버에 요청할 때마다 네트워크 리소스를 낭비하게 된다. 만약 캐시를 사용하게 된다면 서버는 첫 번째 응답 때 이미지 파일과 함께 cache-control을 작성해서 보내준다. 이후 두번째 요청 때는 먼저 캐시를 조회해서 캐시의 유효시간이 지나지 않았다면 캐시에서 해당하는 데이터를 사용할 수 있다. 만약 유효시간이 지났다면 서버에 다시 이미지 파일을 요청해야 한다.
캐시 유효 시간은 지났지만 서버에서 다시 받아와야하는 파일이 캐시에 저장되어 있는 파일과 완전히 동일한 경우일 때, 서버에서 다시 받아오는 일 없이 서버의 파일과 캐시의 파일이 동일한지 확인해서 재사용하면 더 효율적이지 않을까? 이럴 때 사용할 수 있는 것이 캐시 검증 헤더와 조건부 요청 헤더이다. (이 부분은 따로 정리해야겠다)
3. Tree Shaking
Tree Shaking이란? 트리쉐이킹(Tree Shaking)은 말 그대로 나무를 흔들어 잔가지를 털어내듯 불필요한 코드를 제거하는 것을 의미한다. 웹사이트에서 인터렉션이 증가하면서 JavaScript의 파일 크기와 JavaScript 파일을 요청하는 HTTP 요청 수가 증가했다. 이는 렌더링 속도가 저하를 유발한다. 따라서 트리쉐이킹을 통해 파일 크기를 가능한 줄이는 것이 최적화에 도움이 된다.
📌 Tree Shaking을 통한 최적화 기법
1. 필요한 모듈만 import 하기
import React from "react"가 아니라, import {useState} from "react"처럼 실제로 사용하는 코드만 불러오기
2. Babelrc 파일 설정하기
Bable은 자바스크립트 문법이 구형 브라우저에서도 호환이 가능하도록 ES5 문법으로 변환하는 라이브러리이다.
(다음 설명부터 이해가 잘 안간다)
require는 export 되는 모든 모듈을 불러오기 때문입니다. 1번에서 작성한 것처럼 필요한 모듈만 불러오기 위한 코드를 작성해도 소용이 없어지는 것입니다.
이를 방지하기 위해서 Barbelrc 파일에 다음과 같은 코드를 작성해주면 ES5로 변환하는 것을 막을 수 있습니다.
{
“presets”: [
[
“@babel/preset-env”,
{
"modules": false
}
]
]
}반대로, modules 값을 true로 설정하면 항상 ES5 문법으로 변환하므로 주의해서 작성해야 합니다.
3. sideEffects 설정하기
(이해가 잘 안간다)
웹팩은 사이드 이펙트를 일으킬 수 있는 코드의 경우, 사용하지 않는 코드라도 트리쉐이킹 대상에서 제외시킨다.
4. ES6 문법을 사용하는 모듈 사용하기
4. Lighthouse
Lighthouse는 사이트를 검사하여 성능을 측정할 수 있는 도구이다. 다양한 지표를 이용하여 웹페이지의 성능을 검사할 뿐만 아니라 그에 대한 개선책도 제공한다.
💡 Lighthouse 이용방법
1. Chrome 개발자 도구에서 실행하기
개발자 도구에 Lighthouse 탭이 있다.
2. Node CLI에서 실행하기
- lighthouse 설치
npm install -g lighthouse- 명령어로 검사 실행
lighthouse <url>📊 Lighthouse 분석 결과 항목
- Performance
- Accessibility
- Accessibility
- Best Practices
- SEO
- PWA (Progressive Web App)
