[javascript] 자바스크립트로 라이브러리/플러그인 지연 로딩을 구현하는 방법은 무엇인가요?
프로젝트에서 자바스크립트 라이브러리나 플러그인을 지연해서 로딩하면 초기 페이지 로딩 시간을 단축하고 성능을 향상시킬 수 있습니다. 이를 위해 다음과 같은 방법을 사용할 수 있습니다.
1. defer 속성 사용
script 태그에 defer 속성을 추가하여 스크립트를 지연 로딩할 수 있습니다. 이렇게 하면 스크립트가 페이지 파싱을 방해하지 않고 비동기적으로 로드됩니다.
<script src="example.js" defer></script>
2. 동적으로 스크립트 추가
DOMContentLoaded 이벤트가 발생했을 때 자바스크립트를 동적으로 추가하여 지연 로딩할 수 있습니다.
document.addEventListener('DOMContentLoaded', function() {
var script = document.createElement('script');
script.src = 'example.js';
document.body.appendChild(script);
});
3. Intersection Observer 사용
Intersection Observer를 사용하여 뷰포트에 플러그인이 나타날 때 스크립트를 로드하도록 할 수 있습니다.
let observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
let script = document.createElement('script');
script.src = 'example.js';
document.body.appendChild(script);
observer.unobserve(entry.target);
}
});
});
observer.observe(document.querySelector('.plugin'));
위의 방법들을 사용하여 자바스크립트 라이브러리나 플러그인을 효율적으로 지연 로딩할 수 있습니다.
이외에도, 웹팩과 같은 모듈 번들러를 사용하여 코드 스플리팅을 통해 지연 로딩을 구현할 수도 있습니다.