Dynamic Imports (import())

What application pattern is implemented using dynamic imports in this code?

// router.js
const routes = {
  '/home': () => import('./pages/home.js'),
  '/about': () => import('./pages/about.js'),
  '/contact': () => import('./pages/contact.js')
};

async function navigateTo(path) {
  const getPage = routes[path] || routes['/home'];
  const page = await getPage();
  document.body.innerHTML = '';
  page.render(document.body);
}

Worker thread management
Route-based code splitting
This code implements route-based code splitting using dynamic imports: 1) Each route is associated with a function that dynamically imports the corresponding page module, 2) Pages are loaded only when a user navigates to that route, 3) This is a common pattern in single-page applications to improve initial load performance, 4) Only the code for the current route is loaded, reducing initial bundle size, 5) Additional routes are loaded on-demand as the user navigates, 6) This approach scales well as the application grows with more routes, 7) Modern frameworks like React, Vue, and Angular implement similar patterns internally, 8) This pattern significantly improves performance for large applications with many routes.
Module bundling
Tree shaking

Next Question (10/43)