동적으로 스크립트 추가

동적으로 스크립트 추가는 웹 페이지가 로딩된 후에 지정된 스크립트 파일을 추가하는 방법입니다. 이를 통해 페이지 초기 로딩 시간을 단축할 수 있습니다. 아래 예시는 DOMContentLoaded 이벤트가 발생한 후에 외부 스크립트를 추가하는 방법을 보여줍니다.

document.addEventListener('DOMContentLoaded', function() {
  var script = document.createElement('script');
  script.src = 'path_to_your_script.js';
  document.body.appendChild(script);
});

웹팩 코드 분할

웹팩의 코드 분할 기능을 사용하여 대규모 앱의 부하를 줄일 수 있습니다. 코드 분할은 앱의 여러 부분을 여러 개의 번들로 나누는 것입니다. 이를 통해 초기 로딩 시간을 최적화합니다. 아래는 웹팩을 사용한 코드 분할의 예시입니다.

import('./path_to_your_script.js').then((module) => {
  // 모듈을 사용하는 코드
}).catch((err) => {
  // 로딩 중 오류 처리
});

라이브러리를 이용한 비동기 로딩

라이브러리를 사용하여 지연 로딩을 구현할 수도 있습니다. 가장 인기 있는 방법은 loadjs나 RequireJS와 같은 라이브러리를 사용하는 것입니다. 아래 예시는 loadjs를 사용하여 지연 로딩하는 방법을 보여줍니다.

loadjs('path_to_your_script.js', function() {
  // 스크립트 로딩 후 실행할 코드
});

이러한 방법들을 사용하여 자바스크립트 지연 로딩을 구현하여 초기 로딩 시간을 최적화할 수 있습니다.

참고문헌:

• https://developer.mozilla.org/en-US/docs/Web/API/Document/DOMContentLoaded_event
• https://webpack.js.org/guides/code-splitting/
• https://github.com/muicss/loadjs
• https://requirejs.org/