Parallel loading and choosing a module at run time
Promise.all starts both imports before waiting, so they load in parallel. A polyfill is code that adds a missing feature to old browsers; loading it conditionally means modern browsers never pay for it.
import(specifier) loads a module while the program is running and returns a promise of its namespace object, so code can be fetched only when it is needed; bundlers use it to split an app into smaller files called chunks.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 6 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write an async function loadAndRun(url) that imports a module, calls its default export with no arguments, and returns the result; if anything fails it returns the string failed.
Turn this into lazy loading: import { format } from "./big-date-lib.js"; button.onclick = () => (out.textContent = format(new Date()));.
Explain it without notes
How does import() differ from a static import declaration?
What does the promise from import() resolve to, and how do you reach the default export?
What is code splitting, and how does a bundler decide where to split?
What are the costs of lazy loading, and how do you reduce them?
Preview
Console
Nothing logged yet.Expected console output
5 LOADED TOGETHER!
chosen at run time: [ 'shout' ]
toSorted exists, so the polyfill was never downloaded