웹 성능 최적화 : Dynamic Import로 js 코드 스플릿하기

⏳ 동적 불러오기(Dynamic Import)에 대해 알아보자 🤨 동적 불러오기가 필요한 이유 일반적으로 spa 구조의 어플리케이션을 빌드할 때 js가 하나로 나오며 그 크기가 비대해지는 경험을 해봤을 것이다. 이렇게 되면 브라우저가 처음 index.html을 불러오고 DOM을 그릴때 js 로딩을 기다리는 시간이 길어지므로 FCP 즉 첫 화면이 그려지는데까지 오랜시간이 걸린다. 이는 CSR SPA 구조의 문제점이었다. 그렇다면 하나로 번들링되는 js를 쪼개서 빌드할 수 없을까? 라는 생각에서 나온 대안 중 하나가 바로 동적 불러오기이다. 동적 불러오기를 적용하게 되면 js를 쪼개서 빌드할 수 있게되고 이는 브라우저가 DOM을 그릴때 첫화면에 필요한 js만 로드해서 페인팅할 수 있다는 말로 FCP가 앞당겨..
개발 2023. 10. 24. 03:03
1
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/12   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
글 보관함