Dynamic Imports & Code Splitting0%

Dynamic Imports & Code Splitting

Beginner12 min read•Updated: Jul 11, 2026

Dynamic Imports & Code Splitting in Modern JavaScript

As web applications grow, loading an entire monolithic bundle upon the user's initial page visit degrades First Contentful Paint (FCP) and Time to Interactive (TTI). Dynamic Imports using the function-like import() syntax enable Code Splitting—downloading chunks of JavaScript on-demand only when actually needed.

1. Static vs. Dynamic Imports

JavaScript

1// STATIC IMPORT: Must be at top of file, blocks initial bundle load
2import { HeavyChart } from './components/HeavyChart.js';
3 
4// DYNAMIC IMPORT: Can be invoked inside any function, event handler, or condition
5const loadChartBtn = document.querySelector('#btn-show-chart');
6 
7loadChartBtn.addEventListener('click', async () => {
8  // Downloads 'HeavyChart.js' chunk over network ONLY when button is clicked!
9  const { HeavyChart } = await import('./components/HeavyChart.js');
10  const chart = new HeavyChart();
11  chart.render('#chart-target');
12});

2. Architectural Mechanics of Code Splitting

When modern bundlers (Webpack, Vite, Rollup, Next.js) encounter import('./path'):

1
They automatically split that module and its private dependencies into an isolated chunk file (e.g. HeavyChart.chunk-a98f12.js).
2
The main bundle size is significantly reduced.
3
At runtime, the browser initiates a network fetch for the chunk only when the import() expression is reached.

Output

                  ┌──► app.js (Main Initial Bundle: 45KB)
                  │
3Application Build ──┼──► analytics.chunk.js (Downloaded on Idle: 20KB)
                  │
                  └──► checkout.chunk.js (Downloaded on Route Change: 120KB)

3. Route-Based Code Splitting

In Single Page Applications (SPAs), loading views for pages the user may never visit is wasteful. Route-based splitting dynamically loads view controllers:

JavaScript

1const routes = {
'/': () => import('./views/HomeView.js'),
'/dashboard': () => import('./views/DashboardView.js'),
'/settings': () => import('./views/SettingsView.js')
5};
6 
7async function navigateTo(path) {
const loadRoute = routes[path] || routes['/'];

showLoadingSpinner();
try {
  const { default: ViewComponent } = await loadRoute();
  const view = new ViewComponent();
  view.mount('#app-root');
} catch (err) {
  showErrorPage('Failed to load page chunk.');
} finally {
  hideLoadingSpinner();
}
20}

4. Chunk Prefetching & Preloading

To eliminate user wait times after code splitting, modern applications instruct the browser to prefetch chunks during idle network bandwidth:

Magic Comments in Webpack / Vite

JavaScript

1// Webpack Magic Comments:
2const module = await import(
3  /* webpackChunkName: "admin-panel" */
4  /* webpackPrefetch: true */
5  './admin/AdminPanel.js'
6);

Interactive Quiz• Knowledge Check

Practice Quiz

Question 1

What does the dynamic import('path') expression return?

Question 2

How do you access the default export from a dynamically imported module?

Question 3

What is the primary performance benefit of Code Splitting?

Question 4

Which link rel attribute hints to the browser to download a script in the background during idle network time?

Question 5

Can dynamic import() be used conditionally inside an if block or try...catch?

Next Lesson

Tree Shaking & Module Bundling Concepts

Continue learning with hands-on practice, examples, and exercises in the upcoming topic.

Related Lessons

Previous Lesson	Next Lesson
ES Modules vs CommonJS Deep Dive	Tree Shaking & Module Bundling Concepts

Practice Quiz

Test your understanding of this lesson with 5 questions. Each question has one correct answer.

Previous Next

PreviousPrevNext