JavaScript Modules — Import, Export, and Modular Code

ES6 Module Syntax

// math.js — Named exports
export const PI = 3.14159;
export function add(a, b) { return a + b; }

// utils.js — Default export
export default function formatDate(date) {
  return new Intl.DateTimeFormat('en-US').format(date);
}

// app.js — Importing
import { add, subtract } from './math.js';
import formatDate from './utils.js';
import * as math from './math.js';

Dynamic Imports

// Lazy load a module
async function loadFeature() {
  const { FeatureComponent } = await import('./features/Feature.js');
  return FeatureComponent;
}

// Route-based code splitting
const routes = {
  '/dashboard': () => import('./pages/Dashboard.jsx'),
  '/settings': () => import('./pages/Settings.jsx'),
};

Re-exports (Barrel Files)

// index.js
export { add, subtract } from './math.js';
export { default as formatDate } from './utils.js';
export * from './constants.js';

// Usage
import { add, formatDate, API_URL } from './index.js';

Tree Shaking Tips

// BAD: imports entire lodash
import _ from 'lodash';

// GOOD: import only what you need
import debounce from 'lodash/debounce';