[성능 베이스캠프] 지그(송지은) 미션 제출합니다. #10

zigsong · 2021-08-30T15:51:23Z

🔥 결과

배포한 CloudFront 접근 경로: https://d3sydo67idcl5c.cloudfront.net/
개선 전후 성능 측정 결과
- 개선 전 (S3)
- 개선 후 (CloudFront)
Lighthouse 95점 이상 → 위 사진
Home 페이지에서 불러오는 스크립트 리소스 크기 < 60kb
히어로 이미지 크기 < 120kb
프랑스 파리에서 Fast 3G 환경으로 접속했을 때
- Home 첫 번째 로드시 LCP < 2.5s
- Home 두 번째 이후 로드시 LCP < 1.5s

✅ 개선 작업 목록

1 요청 크기 줄이기

소스코드 크기 줄이기
- gzip 압축: 797kB → 137kB
- CSS 최적화: 797kB → 757kB
  CssMinimizerWebpackPlugin + MiniCssExtractPlugin
```
- CssMinimizerWebpackPlugin - CSS 파일을 최적화하고 축소해준다
- MiniCssExtractPlugin - CSS 파일을 별도 파일로 추출하여, CSS 코드가 포함된 JS 파일 별로 CSS 파일을 생성한다. (CSS 및 SourceMaps의 온 디멘드 로딩기능도 지원한다.)
```
- JS 소스코드 난독화 (code split 이후 실행)
  - TerserWebpackPlugin 사용 (UglifyWebpackPlugin과 압축 후 사이즈는 거의 일치하지만, 파싱 속도가 더 빠르다고 한다.)
이미지 크기 줄이기
- png → webp, gif → mp4

2 필요한 것만 요청하기

페이지별 리소스 분리
loadable components의 prefetch 기능 사용

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

GIPHY의 trending API를 Search 페이지에 들어올 때마다 새로 요청하지 않아야 한다.
- 객체를 이용한 cache 구현
CloudFront 캐시 설정
- 기본 캐시 정책 사용
- 바뀔 일이 거의 없는 정적 파일들에 대해서는 Cache-Control: max-age 헤더 추가

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

검색 결과 > 추가 로드시 추가된 목록만 렌더되어야 한다.
- GifItem을 React.memo로 래핑
  <memoize 이전> 모든 GifItem이 리렌더링
  
  <memoize 이후> 기존의 GifItem은 리렌더링이 되지 않음
LayoutShift 없이 hover 애니메이션이 일어나야 한다.
- top 속성 대신 transform: translate 사용

🧐 공유

ImageMinifierPlugin은 왜 compression이 거의 되지 않을까? 어떤 옵션과 함께 사용해야 할까?
React.lazy vs loadable components
- Loadable components는 preload가 가능하다. lazy와 loadable, 각각을 언제 쓰면 좋을지 고민해봐야겠다.
Uglify vs Terser
Terser vs. Uglify vs. babel-minify: Comparing JavaScript minifiers - LogRocket Blog
- Terser의 parse 속도가 uglify보다 더 빠르다고 한다!
cache를 객체로 저장하는 것과 localStorage에 저장하는 것 중 어떤 것이 더 좋은 방법일까?
- WeakMap은 딱히 소용이 없을까? 우선 딱히 키값으로 객체를 사용할 이유가 없다고 생각하여 그냥 Map을 사용했다. WeakMap의 키로 사용된 객체가 없다면 해당 객체는 GC에 의해 수거된다는데, 어느 상황에서 유용하게 쓰일 수 있을지 궁금하다.
MiniCssExtractPlugin 을 사용하여 CSS 파일을 분리하는 것이 모든 경우 더 바람직할까?
webp는 상당히 혁신적인 확장자인 것 같다. gif를 지양해야 하는 이유에 대해서도 아티클을 제대로 읽어봐야겠다.
github actions에서 cloudfront cache invalidation을 위한 aws cli 명령어가 먹히지 않는다. 😞

💎 성능 미션 정리 블로그

- change push branch - add s3 run command

zigsong

인덴트 다 줄인 건데 왜 늘어났는지 모를 일이네요 😭

zigsong · 2021-08-30T15:58:18Z

src/components/FeatureItem/FeatureItem.jsx

+		<div className={styles.featureItem}>
+			<video className={styles.featureImage} autoPlay muted loop>
+				<source src={videoSrc} type="video/mp4" />
+				Sorry, your browser doesn't support embedded videos.
+			</video>
+			<div className={styles.featureTitleBg}></div>
+			<h4 className={styles.featureTitle}>{title}</h4>
+		</div>


gif를 mp4로 변경

zigsong · 2021-08-30T15:58:43Z

src/components/Footer/Footer.jsx

+	return (
+		<footer>
+			<p>memegle 2021. All rights reserved. Powered by <a href="https://giphy.com/">Giphy</a>.</p>
+		</footer>
+	);


오잉 이건 인덴트를 4 → 2로 줄인건데 왜 더 들어간 것처럼 됐지

인덴트가 space 2칸이 아니라 tab 2칸인 것 같아요!

헉 글쿠나 고마워용

zigsong · 2021-08-30T15:58:53Z

src/components/GifItem/GifItem.jsx

GifItem memoization

zigsong · 2021-08-30T15:59:01Z

src/components/GifItem/GifItem.module.css

@@ -41,6 +41,6 @@
 /* PC */
 @media all and (min-width:1080px) {
    .gifItem:hover {
-        top: -0.75rem;
+        transform: translateY(-0.75rem);


layout shift 방지

zigsong · 2021-08-30T15:59:16Z

src/components/NavBar/NavBar.jsx

+					<span className={styles.logo}>memegle</span>
+				</Link>
+				<Link to="/search">
+					<button className={styles.searchPageButton} onMouseOver={() => SearchLoadable.preload()}>start search</button>


Search 컴포넌트에 loadable preload 적용

zigsong · 2021-08-30T16:00:15Z

src/pages/Search/Search.jsx

-        <span>We Found...</span>
-    </h4>;
+	if (noResult) {
+		return <h4 className={styles.resultTitle}><span>Nothing</span>🥲</h4>;


노팅 아니고 낫띵!

ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

zigsong · 2021-08-30T16:00:46Z

src/service/fetchGif.js

+  const cache = { current: null };
+
+  return async () => {
+    try {
+      if (!cache.current) {
+        const response = await fetch(TRENDING_GIF_API);
+        const gifs = await response.json();
+        const data = formatResponse(gifs.data ?? []);
+
+        cache.current = data;
+      }
+
+      return cache.current ?? [];
+    } catch (error) {
+      return [];
+    }
+  };
+})();


클로저 리턴하여 객체(cache)값 지키기!

const cache = { current: null };
과 같이 작성한 이유가 있는지 궁금합니다(순수한 호기심)

useRef 와 비슷하게 사용된다는 뉘앙스를 주기 위해서일까요~?

@bigsaigon333
사실 @Tanney-102 브콜의 코드가 좋아보여서 참고했습니다! 다르게 하려고 했는데 current라는 네이밍이 탐나더라구요 ㅋㅋㅋ
저는 useRef와 비슷한 뉘앙스라고 생각하고 사용했습니다 😊

@bigsaigon333 @zigsong 덧붙이자면 추후 코드를 고도화할때 추가 정보를 넣을 수 있겠다 생각했습니다 (최초 캐시 시간, 캐싱 기간 등) 여러 변수로 관리하기 보다 하나의 객체로 관리하는게 좋다 생각했어요!

클로저를 잘 적용하신 것 같습니다 👍👍👍 멋지네요 ㅎㅎ
현재는 fetchTrendingGifs에만 캐싱이 적용되어 있는데 만약 다른 api 요청에도 캐싱이 적용되야 한다면 어떨까요?
한단계 더 추상화하여 캐싱이 적용된 함수를 리턴하는 함수가 있다면 엄청 fancy 할 것 같습니다 😄

zigsong · 2021-08-30T16:01:05Z

webpack.config.js

+    filename: '[name].js',
+    path: path.join(__dirname, '/dist'),
+    clean: true,


code splitting용 청크 분리

zigsong · 2021-08-30T16:01:27Z

webpack.config.js

+    process.env.GIPHY_API_KEY
+      ? new DefinePlugin({
+          'process.env.GIPHY_API_KEY': JSON.stringify(process.env.GIPHY_API_KEY),
+        })
+      : new Dotenv(),


리뷰어 곤이가 알려준 환경변수 정의하기

zigsong · 2021-08-30T16:01:45Z

webpack.config.js

optimize 켜주기! (true)

yungo1846

제가 미처 신경쓰지 못하고 넘어간 부분들(max-age, CSS chunk 분리) 등을 잘 적용해주셔서 많이 배울 수 있었습니다 👍

성능최적화에 대해 정리하신 블로그 글도 엄청 깔끔하게 잘 쓰셨더라고요. 지그의 정리 실력을 닮고 싶네요 😄

그런데 vscode의 인덴트 설정이 잘 못 되어 있는지 코드의 인덴트가 엄청 깊었습니다 ㅎㅎ;;
한번 확인해주시면 좋을 것 같아요...!

추가적으로 남긴 코멘트도 한번 고민해보시면 좋을 것 같습니다 👍

yungo1846 · 2021-09-01T10:22:22Z

src/components/NavBar/NavBar.jsx

+				<Link to="/search">
+					<button className={styles.searchPageButton} onMouseOver={() => SearchLoadable.preload()}>start search</button>


onMouseOver={() => SearchLoadable.preload()} 이 부분은 익명함수를 안 써도 괜찮을 것 같아요!

익명함수를 안쓰면 이벤트 객체가 preload의 매개변수로 전달되지 않나요..? 👀
(Loadable Components 안써봐서 걍 궁금해서 물어봅니다 🐕 )

preload에서 인자를 쓰지 않으니 이벤트 객체가 넘어가도 상관없다고 판단했습니다 ㅎㅎ

yungo1846 · 2021-09-01T10:22:51Z

src/pages/Home/Home.jsx

+				</div>
+				<Link to="/search" onMouseOver={() => SearchLoadable.preload()}><button className={styles.cta}>start search</button></Link>


여기도 마찬가지로 익명함수 없이 해결할 수 있을 것 같습니다!

yungo1846 · 2021-09-01T10:27:35Z

src/pages/Loadable/Loadable.jsx

+const SearchLoadable = loadable(() => import("../Search/Search"), {
+  fallback: <div>Loading...</div>
+})


fallback을 주셨군요!
fallback이 뜨는 상황일 때, 지금의 코드에서는 일시적으로 흰색 배경이 뜰 것 같아요. memegle의 기본적인 배경색이 검은색이니까 사용자 입장에서는 눈이 조금 아플 것 같습니다 😂

지그도 이를 잘 알고 대비책으로 마우스 엔터시에 프리로드를 주셔서 해결하셨네요 👍
하지만 사용자가 tab 키를 이용하여 start review 버튼을 누른다면 깜빡이는 현상이 발생하지 않을까요..? 🤔

yungo1846 · 2021-09-01T10:31:11Z

src/service/fetchGif.js

+  const cache = { current: null };
+
+  return async () => {
+    try {
+      if (!cache.current) {
+        const response = await fetch(TRENDING_GIF_API);
+        const gifs = await response.json();
+        const data = formatResponse(gifs.data ?? []);
+
+        cache.current = data;
+      }
+
+      return cache.current ?? [];
+    } catch (error) {
+      return [];
+    }
+  };
+})();


클로저를 잘 적용하신 것 같습니다 👍👍👍 멋지네요 ㅎㅎ
현재는 fetchTrendingGifs에만 캐싱이 적용되어 있는데 만약 다른 api 요청에도 캐싱이 적용되야 한다면 어떨까요?
한단계 더 추상화하여 캐싱이 적용된 함수를 리턴하는 함수가 있다면 엄청 fancy 할 것 같습니다 😄

yungo1846 · 2021-09-02T00:39:08Z

src/pages/Search/Search.jsx

+	useEffect(async () => {
+		if (loading) {
+			const gifs = await fetchTrendingGifs();
+
+			setGifList(gifs);
+			setLoading(false);
+		}
+
+		return () => setLoading(true);
+	}, []);


저도 놓치고 있던 부분인데 공원의 함정이 있었네요 ㅋㅋㅋㅋ
도비 덕에 알았습니다. useEffect의 콜백이 async 함수였네요 ㅎㅎ;;;

오마이갓

zigsong · 2021-09-02T09:11:07Z

안녕하세요 곤이~!

loading 컴포넌트 만들었습니다 하하 예쁘죠

memoizePromise 곤이 PR 참고해서 만들었어요~! a2462e7
useEffect 안의 async도 해결했습니다 알려주셔서 고마와용 23b1e7b

yungo1846 · 2021-09-02T09:21:03Z

넵 지그 리뷰 반영해주신 것 확인했습니다!
이번 미션 진행하면서 성능최적화에 대해 새롭게 많이 배워가신 것 같네요 👍
로딩 페이지도 엄청 깔쌈하게 뽑혔네요 ㅎㅎ

바로 merge 하겠습니다!

zigsong and others added 23 commits August 27, 2021 21:55

chore: create push_builder

04e3f32

fix: update push_builder

89892bf

fix: update builder

e0de48f

- change push branch - add s3 run command

fix: revert push branch

fa3f15b

chore: yarn install & fix indent

d9147fb

fix: update builder for aws cloudfront cache policy

d575883

fix: update push builder - split multiple run commands

2d5afd6

fix: update push builder for conceal cloudfront distribution id

b2e723e

fix: remove cache invalidation command

72f7617

chore: install css optimization plugins

bd75e0f

Merge branch 'main' of https://github.com/zigsong/perf-basecamp

998f55b

chore: install uglifyJS

c71b145

feat: compress images

18e5510

fix: update push base branch

3e4f077

chore: settings for DefinePlugin

a153d3a

feat: code splitting using loadable components

c1db97c

feat: save trending api fetch data in cache

5356694

feat: memoize GifItem component

2853e7b

feat: prevent layout shift

c3b1f36

refactor: change uglify to terser

8c432e4

refactor: add fallback option in loadable component

da19ac5

refactor: convert gif to mp4

36c7582

feat: convert gif into mp4 in Search page

c6761c6

zigsong commented Aug 30, 2021

View reviewed changes

yungo1846 suggested changes Sep 1, 2021

View reviewed changes

yungo1846 reviewed Sep 2, 2021

View reviewed changes

zigsong force-pushed the zig branch from 3e290b2 to 0ad4f66 Compare September 2, 2021 00:45

refactor: change bundle output filname using chunkhash

cb55868

zigsong force-pushed the zig branch from 0ad4f66 to c4233b4 Compare September 2, 2021 00:49

refactor: fix indentation

b7ddcdc

zigsong force-pushed the zig branch from c4233b4 to b7ddcdc Compare September 2, 2021 00:57

zigsong added 3 commits September 2, 2021 17:44

refactor: refactor loading component

d48df70

refactor: memoize fetching function

a2462e7

refactor: remove async function inside useEffect

23b1e7b

yungo1846 merged commit 9a1b6f4 into woowacourse:zigsong Sep 2, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[성능 베이스캠프] 지그(송지은) 미션 제출합니다. #10

[성능 베이스캠프] 지그(송지은) 미션 제출합니다. #10

zigsong commented Aug 30, 2021 •

edited

Loading

zigsong left a comment

zigsong Aug 30, 2021

zigsong Aug 30, 2021

SunYoungKwon Aug 31, 2021

zigsong Sep 2, 2021

zigsong Aug 30, 2021

zigsong Aug 30, 2021

zigsong Aug 30, 2021

zigsong Aug 30, 2021

SunYoungKwon Aug 31, 2021

zigsong Aug 30, 2021

bigsaigon333 Aug 31, 2021

zigsong Aug 31, 2021

Tanney-102 Aug 31, 2021 •

edited

Loading

yungo1846 Sep 1, 2021

zigsong Aug 30, 2021

zigsong Aug 30, 2021

zigsong Aug 30, 2021

yungo1846 left a comment

yungo1846 Sep 1, 2021

bigsaigon333 Sep 1, 2021

yungo1846 Sep 2, 2021

yungo1846 Sep 1, 2021

yungo1846 Sep 1, 2021

yungo1846 Sep 1, 2021

yungo1846 Sep 2, 2021

zigsong Sep 2, 2021

zigsong commented Sep 2, 2021

yungo1846 commented Sep 2, 2021

		<Link to="/search">
		<button className={styles.searchPageButton} onMouseOver={() => SearchLoadable.preload()}>start search</button>

		</div>
		<Link to="/search" onMouseOver={() => SearchLoadable.preload()}><button className={styles.cta}>start search</button></Link>

[성능 베이스캠프] 지그(송지은) 미션 제출합니다. #10

[성능 베이스캠프] 지그(송지은) 미션 제출합니다. #10

Conversation

zigsong commented Aug 30, 2021 • edited Loading

🔥 결과

✅ 개선 작업 목록

🧐 공유

💎 성능 미션 정리 블로그

zigsong left a 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

Choose a reason for hiding this comment

Tanney-102 Aug 31, 2021 • edited Loading

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

yungo1846 left a 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

zigsong commented Sep 2, 2021

yungo1846 commented Sep 2, 2021

zigsong commented Aug 30, 2021 •

edited

Loading

Tanney-102 Aug 31, 2021 •

edited

Loading