fix: Video asset 경로 이슈 수정 - #42
Conversation
| <source src="src/assets/videos/login_background.mp4" type="video/mp4" /> | ||
| <source src={backgroundVideo} type="video/mp4" /> |
There was a problem hiding this comment.
요거 login_background.mp4 를 src/assets 안에 두지 말고 public/ 안에 두어서 정적 경로로 가져오는 것은 어떨까용?
지금 비디오가 2.8MB 정도 되어서 번들에 포함시키기보다는 정적 파일로 제공하는 게 초기 로딩 성능에 더 유리할 것 같아서요 ~!!
제가 src/assets 에 위치시켰었네요... ㅎㅎㅎ
There was a problem hiding this comment.
오호 public으로 빼면 LCP 측면에서 유리한 부분이 있을 것 같네요 동의합니다!!
@seobbang 개인적인 궁금증인데, 용량을 제외하고 정적 에셋을 번들에 포함시키거나 미포함시키는 기준이 또 있을까요?!
There was a problem hiding this comment.
저희는 CDN 서버가 없지만, 일반적으로는 에셋을 CDN에서 관리하는 경우가 많더라고요 🤔
그래도 용량 외의 기준으로 생각해보자면, /public에 두고 정적 경로 접근하는 방식은 캐싱 무효화를 위해 리소스가 변경될 때 파일명을 변경해주는 직접적인 관리가 필요한 것으로 알고 있어요. 그래서 자주 바뀌지 않는 리소스를 관리하는데 적합한 것 같습니당.
반면에 아이콘이나 작은 UI 이미지의 경우 빌드 타임에 해시가 자동으로 붙어 캐싱 관리가 용이하기도 하고, 코드에서 로직과 연계가 될 수 있는 것들은 정적 경로로 접근하기보다 변경해주신 것처럼 import 해서 사용하는 것이 자연스럽지 않을까 해요! 특히 저희는 SVG 같은 경우 컴포넌트화하여 import해서 바로 참조하고 있기도 하구용
저는 이런 점들을 고려해서 위치시켰던 것 같습니닷
close #41
🔎 PR 내용
현재 video asset 경로가 빌드 이전 구조 기준으로 정적으로 지정되어있어 빌드 후 에셋을 못 받아오는 이슈가 있어요.
import 방식으로 변경해주어 빌드 후에도 에셋 경로 잘 맞춰지도록 수정했습니다~!
📷 스크린샷
AS-IS
TO-BE