먼저, 기능을 지원하는지 여부를 확인하려면 “Modernizr” 같은 라이브러리를 사용하거나 기능을 직접 감지할 수 있습니다. 예를 들어, 사용자의 브라우저가 “Promise”를 지원하는지 확인하기 위해서는 다음과 같은 코드를 사용할 수 있습니다:

if (!window.Promise) {
  // Promise polyfill을 로드
}

Polyfill을 동적으로 로드하기 위해 일반적인 방법은 “script” 요소를 동적으로 생성하여 필요한 Polyfill 스크립트 파일을 추가하는 것입니다. 예를 들어, “Promise” Polyfill을 동적으로 로드하기 위해서는 다음과 같은 코드를 사용할 수 있습니다:

if (!window.Promise) {
  var script = document.createElement('script');
  script.src = 'path/to/promise-polyfill.js';
  document.body.appendChild(script);
}

이렇게 하면 브라우저가 “Promise”를 지원하지 않을 때에만 해당 Polyfill 스크립트를 동적으로 로드합니다. 기타 필요한 Polyfills에 대해서도 동일한 방법을 사용할 수 있습니다. 이렇게 하면 사용자가 이미 지원하는 기능을 더 이상 로드할 필요가 없으므로 번들 크기를 줄일 수 있습니다.

참고자료:

• Polyfill MDN 문서
• Modernizr 라이브러리