Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
Imagine you're planning a party. You don't bring all the food and decorations at once - you bring what you need when you need it! Dynamic import does the same for your code. Instead of loading all JavaScript upfront, you load modules only when they're needed. This makes your app start faster!
• Loads everything at startup
• Slow initial page load
• Downloads unused code
• Can't load conditionally
• Loads only when needed
• Fast initial page load
• Downloads on-demand
• Conditional loading!
// Loaded immediately at file start
import { utils } from './utils.js';
import React from 'react';
// Always loaded, even if never used
console.log('Utils loaded');When: File is parsed
How: Synchronous
Where: Top of file only
// Loaded only when needed
button.onclick = async () => {
const { utils } = await import('./utils.js');
// Loaded on-demand
utils.doSomething();
};When: When you call it
How: Asynchronous (Promise)
Where: Anywhere in code
// import() returns a Promise
import('./module.js')
.then(module => {
console.log('Module loaded!');
module.doSomething();
})
.catch(err => {
console.error('Failed to load:', err);
});async function loadModule() {
try {
const module = await import('./module.js');
module.doSomething();
} catch (err) {
console.error('Failed to load:', err);
}
}
loadModule();// Import specific exports
const { add, subtract } = await import('./math.js');
console.log(add(2, 3)); // 5
// Import default export
const { default: MyComponent } = await import('./Component.js');
// Both together
const { default: utils, helper } = await import('./utils.js');// Only load chart library when user clicks "Show Chart"
document.getElementById('showChart').onclick = async () => {
// Show loading indicator
showLoader();
// Load heavy chart library on-demand
const Chart = await import('chart.js');
// Use the library
new Chart(ctx, { type: 'bar', data: chartData });
hideLoader();
};
// Result: Users who never click "Show Chart"
// never download the heavy chart library!// Load different modules based on condition
async function loadEditor() {
if (user.isPremium) {
// Load advanced editor for premium users
const { AdvancedEditor } = await import('./AdvancedEditor.js');
return new AdvancedEditor();
} else {
// Load basic editor for free users
const { BasicEditor } = await import('./BasicEditor.js');
return new BasicEditor();
}
}
const editor = await loadEditor();// Load page components only when navigating
async function navigateTo(page) {
switch(page) {
case 'dashboard':
const { Dashboard } = await import('./pages/Dashboard.js');
return <Dashboard />;
case 'profile':
const { Profile } = await import('./pages/Profile.js');
return <Profile />;
case 'settings':
const { Settings } = await import('./pages/Settings.js');
return <Settings />;
}
}
// Each page loads only when visited!// Load multiple modules in parallel
const [utilsModule, helpersModule, configModule] = await Promise.all([
import('./utils.js'),
import('./helpers.js'),
import('./config.js')
]);
// All loaded simultaneously!
utilsModule.doSomething();
helpersModule.help();
configModule.init();Always use .then() or await. It's asynchronous!
Can be used anywhere in your code - functions, loops, conditionals!
Webpack, Vite, Rollup automatically create separate chunks for dynamic imports!
Each dynamic import makes a network request. Consider caching and loading states!
Load JavaScript modules on-demand instead of upfront
Faster startup, smaller bundles, load only what's needed
const module = await import('./file.js')
Heavy libraries, routes, modals, feature flags