[개인 미션 - 성능 오답노트] 윤생(이윤성) 미션 제출합니다. #79

2yunseong · 2023-09-06T08:25:23Z

안녕하세요 제레미!! 반갑습니다~!
잘부탁드립니다 😁

🔥 결과

배포 전 사이트 : https://2yunseong.github.io/perf-basecamp/
배포한 CloudFront 접근 경로: https://d1lap5arh0f4pt.cloudfront.net
개선 전후 성능 측정 결과
- 개선 전 (GitHub Pages)

개선 후 (CloudFront)

✅ 개선 작업 목록

1 요청 크기 줄이기

소스코드 크기 줄이기
- cdn의 자동압축을 통해 네트워크 응답시 보내는 소스코드의 크기를 줄였습니다. (cdn사용전에는 CompressPlugin을 사용해 gzip으로 압축)
- css minimizer plugin을 사용해 css의 크기를 줄였습니다.
- webpack 5 에서 기본제공해주는 teaser plugin을 통해 소스코드의 공백 등 크기를 줄였습니다.
이미지 크기 줄이기
- 이미지 리사이징 사이트를 이용해 이미지 크기를 줄였습니다.
- gif -> mp4로 변경했습니다!

2 필요한 것만 요청하기

페이지별 리소스 분리
- code splitting 을 통해 한번에 불러오는 소스코드의 크기를 줄였습니다.
아이콘 패키지 Tree Shaking
- react icons all files을 사용해 분리하였습니다. (혹시 webpack에서 하는 방법을 알고 계신가요?)

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

CloudFront 캐시 설정 (설정값, 해당 값을 설정한 이유 포함)
- Cache-Control: max-age=7776000 (3개월)
  Cache-Control ~ max-age은 캐싱하려는 서버(cdn)에 원본서버에서 가져온 데이터를 몇초 동안 보관할지 설정하는 헤더라고 판단하였고, 해당 설정을 통해 원본(s3)에서 가져온 데이터를 cdn에 오랜기간 캐싱할 수 있게 하였습니다.
GIPHY의 trending API를 Search 페이지에 들어올 때마다 새로 요청하지 않아야 한다.
- session Storage를 활용해, 사용자가 사이트에 머무는 동안은 trending API를 다시 호출하지 않게 caching 하였습니다.

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

검색 결과 > 추가 로드시 추가된 목록만 새로 렌더되어야 한다.
- react.memo를 사용하였습니다.
Layout Shift 없이 애니메이션이 일어나야 한다.
- 포지션을 직접변경하는 css를 transform을 이용해 변경하였습니다.
Frame Drop이 일어나지 않아야 한다.
- (Chrome DevTools 기준) Partially Presented Frame 역시 최소로 발생해야 한다.
- Layout을 변경하는 position 대신 transform 하였습니다.

🧐 공유

HTTP Cache 관련해서는 다람쥐책(HTTP 완벽 가이드)를 읽었습니다. 어렵지만 헤더에 관한 정보를 얻을 수 있었습니다.
performance tab 을 사용하는게 어려웠는데 크롬 공식 예제 따라하면서 하니까 좋았어요!
Tree Shaking은 직접 적용해보았는데 여기서 말하는 side effect가 무엇인지 잘 모르겠네요 ..ㅠ 혹시 아시면 공유부탁 드립니당 링크

- 코드의 공백등을 제거 함. - 빌드 시 bundle.js의 크기를 1097293B 에서 274670B로 개선

- 소스코드 크기 bundle.js 274670B -> 271203B 로 감소

shackstack

안녕하세요 윤생! 이렇게 만나뵙게 되어 영광입니다. 미션을 충실하게 완수해주셨네요! 코멘트 확인해주십쇼!

Tree Shaking에서 side effect에 대한 질문

저도 잘 알지는 못하지만 아는 선에서 말씀드리자면, webpack5에서 자동으로 트리셰이킹을 해주지만 아직 완벽한 자동화가 되지 않아 그런 경우 side effect를 따로 설정해주면 되는 것으로 알고 있어요. 여기서 side effect는 모듈간의 의존관계가 있을 경우 모듈이 트리셰이킹 과정에서 제거되었을 때 발생할 수 있는 부작용이라고 볼 수 있을 것 같습니다. 혹시 답이 되었을까요?

package.json

shackstack · 2023-09-10T00:40:20Z

package.json

    "@webpack-cli/generators": "^2.2.0",
    "babel-loader": "^8.2.2",
+    "compression-webpack-plugin": "^10.0.0",


CDN 사용 전에 적용하셨던 플러그인이군요! 이제 지워주셔도 좋을 것 같습니다. 😄

shackstack · 2023-09-10T00:50:00Z

src/assets/images/find.mp4

mp4로 변환은 로딩속도를 개선 측면에서 매우 좋은 것 같습니다.
다만 GIF를 검색하고 다운받는 서비스에서 MP4로 변환하는 것이 옳은 방향인지 의문이 듭니다.
저도 미션하면서 고민되었던 부분이라 공유드립니다!

저도 많이 고민되었어요! 사실 그래서 실제 프로젝트에서 사용할 일이 있다면 그렇게 크지 않다면 (hero처럼) gif로 넘겨주는 것도 나쁘지 않다고 생각이 듭니다~! 다만 미션이라 이것저것 해보려고 했습니다!

shackstack · 2023-09-10T00:53:35Z

src/pages/Home/Home.tsx

+import heroImage from '../../assets/images/hero.webp';
+import trendingMp4 from '../../assets/images/trending.mp4';
+import findMp4 from '../../assets/images/find.mp4';
+import freeMp4 from '../../assets/images/free.mp4';


webp 미지원 브라우저에 대한 대응도 있으면 좋을 것 같아요.

그리고 공원 강의에서 잠깐 소개되었던 건데, 애플에서 만든 heic도 용량대비 품질이 webp보다 좋더라구요.

하지만 지원하는 곳이 한군데 뿐이네요..

역시 애플꺼라고 사파리만..

shackstack · 2023-09-10T00:54:40Z

src/pages/Home/components/CustomCursor/CustomCursor.tsx

@@ -14,20 +15,17 @@ const CustomCursor = ({ text = '' }: CustomCursorProps) => {

  useEffect(() => {
    if (cursorRef.current) {
-      cursorRef.current.style.top = `${mousePosition.pageY}px`;
-      cursorRef.current.style.left = `${mousePosition.pageX}px`;
+      cursorRef.current.style.transform = `translate(${mousePosition.pageX}px, ${mousePosition.pageY}px)`;


shackstack · 2023-09-10T01:00:18Z

src/pages/Home/components/CustomCursor/CustomCursor.tsx

-        <span key={index} className={styles.character}>
-          {char}
-        </span>
+        <CustomCursorChar key={index} char={char} />


shackstack · 2023-09-10T01:03:53Z

src/pages/Home/components/FeatureItem/FeatureItem.tsx

이 친구는 React.memo를 적용안하신 이유가 있으신가요?

FeatureItem 같은 경우 검색 처럼 잦은 많은 갯수의 잦은 렌더링이 일어나지 않을거라 판단해 따로 메모이제이션을 적용하지 않았습니다!

shackstack · 2023-09-10T01:05:04Z

src/pages/Search/hooks/useGifSearch.tsx

+        if (!sessionStorage.getItem('trending')) {
+          const newTrendingGifs = await gifAPIService.getTrending();
+          sessionStorage.setItem('trending', JSON.stringify(newTrendingGifs));
+        }
+
+        const cachedTrendingGifs = sessionStorage.getItem('trending');
+        if (!cachedTrendingGifs) return;
+
+        const gifs: GifImageModel[] = JSON.parse(cachedTrendingGifs);


shackstack · 2023-09-10T01:05:40Z

webpack.config.js

@@ -37,10 +42,10 @@ module.exports = {
      },
      {
        test: /\.css$/i,
-        use: ['style-loader', 'css-loader']
+        use: [MiniCssExtractPlugin.loader, 'css-loader']


이렇게 바꿔주신 이유가 궁금합니다!

css를 압축하기 위해 별도의 loader를 사용하려고 하였습니다!

shackstack

윤생 고생하셨습니다! approve 진행할게요.

2yunseong added 22 commits September 1, 2023 11:34

build: minimizer 설정

8d3e1b0

- 코드의 공백등을 제거 함. - 빌드 시 bundle.js의 크기를 1097293B 에서 274670B로 개선

build: 명시적으로 sideEffects를 포함하지 않는 설정 - 명시적으로 sideEffects 가 false임을 표현

ebe2704

- 소스코드 크기 bundle.js 274670B -> 271203B 로 감소

chore: webpack bundle analyzer 설치

ea5563b

build: contenthash 부착

1c16e01

chore: side effect 수정

fb3efc9

chore: node버전에 맞게 패키지 버전 수정

9a9c3ac

chore: compression-webpack-plugin 설치

a4dc9f5

build: gzip 압축 코드 설치

076b20b

refactor: 코드 스플리팅 적용

ddc9d73

refactor: 이미지 리사이징 및 확장자 변경

603f913

build: minicssExtractPlugin 설치

3a2849d

refactor: sessionStorage를 활용한 api값 캐싱

aeef1bd

build: 빌드 시 주석을 제거해주는 설정 추가

f1dd4e4

refactor: 불필요한 렌더링이 되는 요소에 메모이제이션 추가

e167d6b

refactor: Layout Shift 개선

15e8945

fix: basename 제거

ee1c73b

fix: CLS 개선

bbdfa3d

chore: css minimizer plugin 설치 및 적용

815d9f7

refactor: git -> mp4로 변경

10595e4

refactor: react icons 필요한 모듈만 import

b4d7dbe

chore: 주석 제거

c70c10c

build: optimize 옵션 명시로 코드 축약

c4a763a

2yunseong requested a review from shackstack September 6, 2023 08:25

2yunseong self-assigned this Sep 6, 2023

shackstack reviewed Sep 10, 2023

View reviewed changes

chore: 필요없는 패키지 명시 제거

b0e656f

2yunseong requested a review from shackstack September 10, 2023 12:32

shackstack approved these changes Sep 11, 2023

View reviewed changes

shackstack merged commit a011707 into woowacourse:2yunseong Sep 11, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[개인 미션 - 성능 오답노트] 윤생(이윤성) 미션 제출합니다. #79

[개인 미션 - 성능 오답노트] 윤생(이윤성) 미션 제출합니다. #79

2yunseong commented Sep 6, 2023 •

edited

Loading

shackstack left a comment

shackstack Sep 10, 2023

shackstack Sep 10, 2023

2yunseong Sep 10, 2023

shackstack Sep 10, 2023

shackstack Sep 10, 2023

2yunseong Sep 10, 2023

shackstack Sep 10, 2023

shackstack Sep 10, 2023

shackstack Sep 10, 2023

2yunseong Sep 10, 2023

shackstack Sep 10, 2023

shackstack Sep 10, 2023

2yunseong Sep 10, 2023

shackstack left a comment

[개인 미션 - 성능 오답노트] 윤생(이윤성) 미션 제출합니다. #79

[개인 미션 - 성능 오답노트] 윤생(이윤성) 미션 제출합니다. #79

Conversation

2yunseong commented Sep 6, 2023 • edited Loading

🔥 결과

✅ 개선 작업 목록

🧐 공유

shackstack left a comment

Choose a reason for hiding this comment

Tree Shaking에서 side effect에 대한 질문

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

shackstack left a comment

Choose a reason for hiding this comment

2yunseong commented Sep 6, 2023 •

edited

Loading