[FE] refactor: svg 파일 최적화 #596

ImxYJL · 2024-09-11T10:37:00Z

resolves [FE] 이미지 파일의 크기를 줄인다. #591

🚀 어떤 기능을 구현했나요 ?

svgo를 이용해 svg 파일들을 경량화했습니다.
(new) svg 파일 원본은 src/assets에, 압축이 진행된 파일은 dist에 올라갈 수 있도록 분리했습니다.
(new) build 스크립트에 svgo를 실행할 수 있도록 스크립트를 추가했습니다.
- prebuild 명렁어로 추가했는데, yarn에서 prebuild는 build를 실행하면 자동으로 불러와줘서 별도로 prebuild문을 실행시킬 필요는 없습니다.
~~반응형 사이징을 적용해 현재 디바이스에 맞는 크기의 이미지를 불러올 수 있게 한다 <- 실패~~

🔥 어떻게 해결했나요 ?

svgo를 설치해 간단한 명령어로 전체 svg 파일을 최적화했습니다.
- 효과
  - 현재 S3에 업로드된 svg 상위 5개 사이즈
    - 765.9 KB
    - 663.9 KB
    - 415.5 KB
    - 300.2 KB
    - 230.9 KB
  - 경량화 이후 상위 5개 사이즈
    - 442
    - 416
    - 390
    - 257
    - 231
사이즈를 측정하는 과정에서 BundleAnalyzerPlugin도 설치했습니다. 이번 PR과 직접적인 연관이 있는 패키지는 아니지만 금방 다시 사용할 것 같아 삭제하지 않았습니다

📝 어떤 부분에 집중해서 리뷰해야 할까요?

반응형 적용하는 과정에서 theme에 명시된 반응형 상수를 수정했었는데, 반응형 사이징에 실패한 관계로 기존 값으로 돌려놨습니다.

📚 참고 자료, 할 말

마지막까지 함께 디버깅해준 리뷰미 최고!

참고용으로 아까 반응형 사이징 시도했다가 실패/부분 성공했던 코드 올립니당

맨 처음 코드

 <img
                src={slide.imageSrc.desktop}
                srcSet={`
                  ${slide.imageSrc.mobile} 324w,
                  ${slide.imageSrc.tablet} 1024w,
                  ${slide.imageSrc.desktop} 1280w
                `}
                sizes={`(min-width: ${breakpoints.desktop}) 65rem, (min-width: ${breakpoints.tablet}) 46rem, 34rem`}
                alt={slide.alt}
/>

마지막 코드

<picture>
                <source
                  type="image/svg+xml"
                  srcSet={`${mobile} 324w, ${tablet} 1024w, ${desktop} 1280w`}
                  sizes={`(max-width:1024px) 340px, (max-width:1280px) 460px, 650px `}
                />
                <img src={desktop} />
</picture>

(GPT 피셜이지만) img태그만 있어도 srcSet, sizes 속성을 사용할 수 있다고 합니다.
위 코드보다 아래 코드가 나은 이유는 순서 문제인지, max-min 문제인지, 값을 하드코딩해서인지는 잘 모르겠네요 �

Co-authored-by: sooyeon <soosoo22@users.noreply.github.com> Co-authored-by: Fe <chysis@users.noreply.github.com> Co-authored-by: badahertz52 <badahertz52@gmail.com>

BadaHertz52

svgo 를 사용할 때 현재 원본과 압축이 같은 src 경로에 있네요.
압축된 것은 dist로 원본은 src로 두는 것을 어떨까요?

그리고 새로운 svg 추가될 때 해당 svg도 압축이 가능하도록 관련 명령어를 script에 추가했으면 해요. dist에 압축을 두니, prebuild 로 svgo를 싫행하면 좋겠네요

chysis

고생했어요 :)👍👍

chysis · 2024-09-12T01:46:41Z

frontend/package.json

@@ -24,7 +24,8 @@
    "react-error-boundary": "^4.0.13",
    "react-router": "^6.24.1",
    "react-router-dom": "^6.24.1",
-    "recoil": "^0.7.7"
+    "recoil": "^0.7.7",
+    "svgo": "^3.3.2"


svgo를 devDependencies로 설치하지 않은 이유가 있는지 궁금해요.

chysis · 2024-09-12T02:05:10Z

frontend/webpack.config.js

@@ -61,6 +63,7 @@ module.exports = (env, argv) => {
        favicon: './src/favicons/favicon.ico',
      }),
      new CleanWebpackPlugin(),
+      //new BundleAnalyzerPlugin(),


추후에 BundleAnalyzerPlugin은 production 모드에서만 쓸 수 있도록 수정하면 좋겠네요!

이미 있는 isProduction 변수를 활용해 new BundleAnalyzerPlugin 이 production 모드에서만 실행되도록 할 수 있겠네요

soosoo22

svg 크기가 많이 줄었네요!!!👍👍👍

soosoo22 · 2024-09-12T04:00:27Z

frontend/package.json

@@ -5,7 +5,7 @@
  "license": "MIT",
  "scripts": {
    "dev": "webpack serve --mode=development --open --hot --progress",
-    "build": "webpack --mode=production --node-env=production",
+    "build": "svgo -rf ./src/assets -o ./dist && webpack --mode=production --node-env=production",


오오!! 추가되었군요!

BadaHertz52 · 2024-09-12T04:07:19Z

frontend/package.json

@@ -5,7 +5,7 @@
  "license": "MIT",
  "scripts": {
    "dev": "webpack serve --mode=development --open --hot --progress",
-    "build": "webpack --mode=production --node-env=production",
+    "build": "svgo -rf ./src/assets -o ./dist && webpack --mode=production --node-env=production",


svgo 실행을 prebuild가 아닌 build 명령어로 한 이유가 있을까요?

저라면 작업을 보다 명확하게 분리하기 위해서 빌드 작업과 빌드 이전의 작업 명령어를 분리할 것 같아서요.

BadaHertz52

svgo 명령어 관련해서 질문을 남겼어요

build냐 prebuild냐는 관점 차이기도 하고 크리티컬한 문제는 아니며 해야할 작업들이 있기에
approve할게요.

BadaHertz52 · 2024-09-12T04:20:21Z

frontend/package.json

@@ -5,6 +5,7 @@
  "license": "MIT",
  "scripts": {
    "dev": "webpack serve --mode=development --open --hot --progress",
+    "prebuild": "svgo -rf ./src/assets -o ./dist ",


ImxYJL and others added 2 commits September 11, 2024 19:20

ci: svgo 및 webpack-bundle-analyzer 설치

fe52db2

Co-authored-by: sooyeon <soosoo22@users.noreply.github.com> Co-authored-by: Fe <chysis@users.noreply.github.com> Co-authored-by: badahertz52 <badahertz52@gmail.com>

chore: svgo로 압축한 svg 파일 업데이트

f18ffb6

ImxYJL added 🍀 FE 우선순위: 중 🛠️ 리팩터링 labels Sep 11, 2024

ImxYJL added this to the 5차 스프린트 milestone Sep 11, 2024

ImxYJL requested review from chysis, BadaHertz52 and soosoo22 September 11, 2024 10:37

ImxYJL assigned soosoo22 and ImxYJL Sep 11, 2024

ImxYJL linked an issue Sep 11, 2024 that may be closed by this pull request

[FE] 이미지 파일의 크기를 줄인다. #591

Closed

BadaHertz52 reviewed Sep 12, 2024

View reviewed changes

ci: svgo를 devDependency로 설치

93fc918

chysis approved these changes Sep 12, 2024

View reviewed changes

ImxYJL added 3 commits September 12, 2024 11:19

ci: svgo를 devDependency로 설치 2

d8e85cb

chore: svg 원본 파일 복원

f3a70c4

ci: build시 svgo로 svg 최적화를 수행할 수 있도록 script 수정

745922f

soosoo22 approved these changes Sep 12, 2024

View reviewed changes

BadaHertz52 reviewed Sep 12, 2024

View reviewed changes

BadaHertz52 approved these changes Sep 12, 2024

View reviewed changes

ImxYJL added 2 commits September 12, 2024 13:17

ci: BundleAnalyzerPlugin을 dev환경에서만 실행하도록 수정

d361aac

ci: prebuild 명령어 분리

3035032

BadaHertz52 reviewed Sep 12, 2024

View reviewed changes

BadaHertz52 merged commit decdc8b into develop Sep 12, 2024
2 checks passed

donghoony deleted the fe/refactor/591-compress-svg-files branch September 26, 2024 02:46

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[FE] refactor: svg 파일 최적화 #596

[FE] refactor: svg 파일 최적화 #596

ImxYJL commented Sep 11, 2024 •

edited

Loading

BadaHertz52 left a comment •

edited

Loading

chysis left a comment

chysis Sep 12, 2024

chysis Sep 12, 2024

chysis Sep 12, 2024

BadaHertz52 Sep 12, 2024 •

edited

Loading

soosoo22 left a comment

soosoo22 Sep 12, 2024

BadaHertz52 Sep 12, 2024

BadaHertz52 left a comment

BadaHertz52 Sep 12, 2024

[FE] refactor: svg 파일 최적화 #596

[FE] refactor: svg 파일 최적화 #596

Conversation

ImxYJL commented Sep 11, 2024 • edited Loading

🚀 어떤 기능을 구현했나요 ?

🔥 어떻게 해결했나요 ?

📝 어떤 부분에 집중해서 리뷰해야 할까요?

📚 참고 자료, 할 말

BadaHertz52 left a comment • edited Loading

Choose a reason for hiding this comment

chysis left a comment

Choose a reason for hiding this comment

chysis Sep 12, 2024

Choose a reason for hiding this comment

chysis Sep 12, 2024

Choose a reason for hiding this comment

chysis Sep 12, 2024

Choose a reason for hiding this comment

BadaHertz52 Sep 12, 2024 • edited Loading

Choose a reason for hiding this comment

soosoo22 left a comment

Choose a reason for hiding this comment

soosoo22 Sep 12, 2024

Choose a reason for hiding this comment

BadaHertz52 Sep 12, 2024

Choose a reason for hiding this comment

BadaHertz52 left a comment

Choose a reason for hiding this comment

BadaHertz52 Sep 12, 2024

Choose a reason for hiding this comment

ImxYJL commented Sep 11, 2024 •

edited

Loading

BadaHertz52 left a comment •

edited

Loading

BadaHertz52 Sep 12, 2024 •

edited

Loading