Skip to content

Commit

Permalink
[성능 베이스캠프 미션] 호프(김문희) 미션 제출합니다. (#33)
Browse files Browse the repository at this point in the history 
* chore: 빌드된 소스코드의 크기를 줄인다. (CSS)
- css 코드 압축을 위해서 css-minimizer-webpack-plugin 설치 및 웹팩 적용
- css 코드 온디맨드 로딩을 위해서 mini-css-extract-plugin 설치 및 웹팩 적용 (style-loader 대신 적용)

* chore: 빌드된 소스코드의 크기를 줄인다. (JS)
- terser-webpack-plugin 설치 및 적용
- 기존의 uglifyJs 가 webpack v5.0.0 을 지원해주지 않아서 terser 설치
- parallel 옵션을 사용하여 빌드 속도 개선

* refactor: 요청 크기를 줄인다.
- 코드 스플릿팅을 적용하여, Home Page 에서 불러오는 스크립트 리소스에 gif 검색을 위한 giphy 모듈이 포함되어 있지 않도록 구현
- Suspense 를 사용하여 해당 페이지 레이지로딩 하는 동안 로딩중이라는 안내메시지 보여주도록 구현

* chore: webpack bundle analyzer 추가

* feat: 이미지 webp 확장자로 변환하도록 설정

* feat: 이미지 크기 줄이기 구현
- 이미지 확장자 webp 로 변경하도록 구현
- 이미지 압축 플러그인 설정

* refactor: 불필요한 file-loader 삭제

* refactor: Home Page 레이지 로딩 추가

* fix: 요구사항 함수 수정

* refactor: customCursor 리플로우 일어나지 않도록 구현
- 기존의 top, left를 바꾸어주던 것을 transform 속성으로 대체

* refactor: gifItem hover 애니메이션 reflow 일어나지 않도록 수정
- hover 시 top 을 조정하던 것을 transform 으로 대체

* refactor: 도움말 패널 오픈시, reflow 일어나지 않도록 수정
- right 속성을 변경하던 것을 transform-translateX 로 대체

* refactor: 검색 결과 추가 로드 시, 추가되는 결과에 대해서만 화면 업데이트가 새로 일어나도록 수정
- GifItem 컴포넌트 React.memo 로 메모이제이션하여 리렌더링 방지
- HelpPanel 컴포넌트 React.memo로 메모이제이션하여 리렌더링 방지

* feat: trendingAPI 캐싱 구현
- trendingAPI 가 SearchPage 에 들어올 때 마다 새로 요청되지 않도록 구현
- 캐시 클래스 구현

* refactor: cache set 메서드 수정
- 기존 데이터 덮어쓰도록 수정

* feat: 검색 결과 api 응답 캐싱 구현
- APICache 클래스 제네릭 타입 수정

* chore: React Dev Tools 실행되지 않도록 코드 추가

* feat: webp 지원하지 않는 브라우저에서 png 이미지 보여주도록 구현
- 웹팩 설정 수정 (webp로 바꿔주는 rule 제거)
- webp, png 이미지 각각 추가

* docs: 완료한 요구사항 목록 체크

* refactor: 캐싱 함수 리팩터링
- 검색결과 캐싱 삭제

* chore: eol 제거

* chore: 웹팩 설정 수정
- devtools sourcemap 생성 false 로 수정
- 이미지 압축 png 파일도 압축하도록 플러그인 설치 및 설정 추가 (pngquant)

* refactor: terser plugin 직접 추가 제거
- 웹팩에 내장되어있기 때문에, 제거

* fix: 잘못된 이미지 압축 설정 수정
- implementation에서 imageminGenerate -> imageminMinify 로 변경하여, 이미지 변환이 아니라 압축 작업을 해주도록 수정

* refactor: App.tsx 의 로딩 Supsense 위치 수정
- Supsense Loader 가 NavBar 와 Footer 와 함께 렌더링 되도록 수정

* refactor: 불필요한 React.memoization 제거
- HelpPanel 에는 props 가 존재하지 않으므로 memo 성능상 이점이 없어서, 제거

* refactor: webp 압축 품질 수정
- 50에서 80으로 수정
  • Loading branch information
@moonheekim0118
moonheekim0118 authored Sep 7, 2022
1 parent 39aa31c commit 0dc2f31
Show file tree
Hide file tree
Showing 16 changed files with 25,475 additions and 193 deletions.
19 changes: 9 additions & 10 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,8 +58,8 @@ Memegle 프로젝트는 곳곳에 성능을 저하시키는 요소들로 가득

#### 1 요청 크기 줄이기

- [ ] 소스코드 크기 줄이기
- [ ] 이미지 크기 줄이기
- [x] 소스코드 크기 줄이기
- [x] 이미지 크기 줄이기

도구

Expand All @@ -74,8 +74,8 @@ Memegle 프로젝트는 곳곳에 성능을 저하시키는 요소들로 가득

#### 2 필요한 것만 요청하기

- [ ] Home 페이지에서 불러오는 스크립트 리소스에 gif 검색을 위한 giphy 모듈이 포함되어 있지 않아야 한다.
- [ ] react-icons 패키지에서 실제로 사용하는 아이콘 리소스만 빌드 결과에 포함되어야 한다.
- [x] Home 페이지에서 불러오는 스크립트 리소스에 gif 검색을 위한 giphy 모듈이 포함되어 있지 않아야 한다.
- [x] react-icons 패키지에서 실제로 사용하는 아이콘 리소스만 빌드 결과에 포함되어야 한다.

도구

Expand All @@ -88,8 +88,8 @@ Memegle 프로젝트는 곳곳에 성능을 저하시키는 요소들로 가득

#### 3 같은 건 매번 새로 요청하지 않기

- [ ] CDN을 적용하고, 한 번 요청한 리소스는 CDN 캐시에서 불러와야 한다.
- [ ] GIPHY의 trending API를 Search 페이지에 들어올 때마다 새로 요청하지 않아야 한다.
- [x] CDN을 적용하고, 한 번 요청한 리소스는 CDN 캐시에서 불러와야 한다.
- [x] GIPHY의 trending API를 Search 페이지에 들어올 때마다 새로 요청하지 않아야 한다.

도구

Expand All @@ -106,12 +106,11 @@ Memegle 프로젝트는 곳곳에 성능을 저하시키는 요소들로 가득

#### 4 최소한의 변경만 일으키기

- [ ] 검색 결과 > 추가 로드시 추가된 목록만 새로 렌더되어야 한다.
- [ ] Layout Shift 없이 애니메이션이 일어나야 한다.
- [ ] Frame Drop이 일어나지 않아야 한다.
- [x] 검색 결과 > 추가 로드시 추가된 목록만 새로 렌더되어야 한다.
- [x] Layout Shift 없이 애니메이션이 일어나야 한다.
- [x] Frame Drop이 일어나지 않아야 한다.
- (Chrome DevTools 기준) Partially Presented Frame 역시 최소로 발생해야 한다.


도구

- Chrome DevTools > Performance
Expand Down
37 changes: 21 additions & 16 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,25 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" href="./public/favicon.ico" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap"
rel="stylesheet"
/>
<title>memegle - gif search engine for you</title>
</head>

<body>
<div id="app"></div>
</body>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" href="./public/favicon.ico" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap"
rel="stylesheet" />
<title>memegle - gif search engine for you</title>
</head>

<body>
<div id="app"></div>
<script>
if (typeof window.__REACT_DEVTOOLS_GLOBAL_HOOK__ === 'object') {
__REACT_DEVTOOLS_GLOBAL_HOOK__.inject = function () { };
}
</script>
</body>

</html>
Loading

0 comments on commit 0dc2f31

Please sign in to comment.