What approach should be used for loading polyfills in a code-split application?
async function loadApp() {
if (!window.IntersectionObserver) {
await import('intersection-observer');
}
if (!window.fetch) {
await import('whatwg-fetch');
}
const app = await import('./app');
app.init();
}
Loading polyfills conditionally based on feature detection is the most efficient approach because: 1) It only loads polyfills when they're actually needed for the browser, 2) Reduces unnecessary code for modern browsers that don't need polyfills, 3) Maintains compatibility while optimizing performance, 4) Can be combined with code splitting for optimal loading strategy. The example demonstrates proper feature detection and conditional loading of polyfills before initializing the application, ensuring both compatibility and performance are maintained.