[FE] feat : 폰트 preload 적용 #605
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- dev 모드가 아닌 prod 모드에서 실행하도록 수정
- 변경 사유 :rel이 preload인 link, stylesheet인 link가 두 개 같이 존재해서 헷갈림 - 변경 방법 : onload="this.onload=null;this.rel='stylesheet'" 사용
soosoo22
approved these changes
Sep 12, 2024
| @@ -10,7 +10,7 @@ const globalStyles = css` | |||
| } | |||
|
|
|||
| body { | |||
| font-family: 'Pretendard', 'Noto Sans', sans-serif; | |||
| font-family: 'Pretendard Variable', 'Noto Sans', sans-serif; | |||
BadaHertz52
commented
Sep 12, 2024
|
|
||
| <link rel="preload" href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap" | ||
| as="style" /> | ||
| <link rel="preload" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/variable/pretendardvariable-dynamic-subset.css" onload="this.onload=null;this.rel='stylesheet'" /> |
There was a problem hiding this comment.
실행 순서
Preload (미리 로드)
는 CSS 파일을 미리 로드하겠다는 의미입니다. 브라우저에게 해당 파일이 나중에 필요할 것이라고 미리 알려서, 브라우저가 해당 파일을 미리 다운로드하게끔 합니다. 하지만 preload는 파일을 가져오기만 할 뿐, 그 파일을 실제로 적용하지는 않습니다.onload 후 rel을 'stylesheet'로 변경
onload="this.onload=null;this.rel='stylesheet'"는 CSS 파일이 완전히 로드된 후에 실행됩니다.
이 코드의 역할은 로드가 끝나면 rel="preload"를 rel="stylesheet"로 바꿔서, CSS 파일이 실제로 웹 페이지에 적용되도록 합니다.
중복 실행 방지
this.onload=null는 onload 이벤트 핸들러를 한번 실행한 후 제거하는 역할을 합니다. 이렇게 하면 이벤트가 다시 실행되지 않도록 막을 수 있습니다.
chysis
approved these changes
Sep 12, 2024
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
🚀 어떤 기능을 구현했나요 ?
pretendard 폰트에 가변 다이나믹 서브셋을 적용한 이유?
기존 코드
기존에 했던 코드로는 rel에 preload를 사용하면 css만 받고, css 안의 pretendard 글꼴을 받지 못했어요.
pretendard 를 preload하는 방법을 찾다가 가변 다이나믹 서브셋을 사용하면 preload되고 폰트 파일 용량도 작아지는 진다는 것을 알게되었어요. 적용해보니, 로드 속도와 용량 측면에서 개선이 있다는 것을 확인했어요.
🔥 어떻게 해결했나요 ?
waterfull 비교
개선 전
개선 후
pretendard
개선 전
개선 후
📝 어떤 부분에 집중해서 리뷰해야 할까요?
📚 참고 자료, 할 말
가변 다이나믹 서브셋 vs 다이나믹 서브셋
다이나믹 서브셋: 웹 페이지에서 사용되는 글리프만 포함된 폰트 파일을 동적으로 생성하여 용량을 줄이는 방식.
가변 다이나믹 서브셋: 다이나믹 서브셋과 가변 폰트를 결합하여, 하나의 폰트 파일에 다양한 스타일(굵기, 너비 등)을 포함하면서 필요한 글리프만 동적으로 불러오는 방식.
🚨 build 시 BundleAnalyzerPlugin 실행되면 CI 빌드 속도가 너~무 느려요!!!
build시 (=production 모드)에서 BundleAnalyzerPlugin가 실행되도록 했는데, CI에서 이 부분에 의해 CI 시간이 10분을 넘어서도 끝나지 않는 오류가 있었어요. 아마 BundleAnalyzerPlugin이 실행되면서 분석 결과 페이지를 실행하는 부분으로 인한 오류지 않을까해요. 그레서 BundleAnalyzerPlugin 부분을 우선 주석처리했어요. 성능 개선이 끝나면 BundleAnalyzerPlugin 플러그인을 삭제해야할 것 같네요.