Dynamic Import in Loop

import() inside loops

warningPerformanceno-dynamic-import-loop

Why this matters

Dynamic import() inside a loop creates a network waterfall. Each iteration waits for the previous module to load. For 10 items, that's 10 sequential network requests.

✗ Bad

const plugins = ["auth", "analytics", "sentry"];
for (const name of plugins) {
  // Sequential dynamic imports
  const mod = await import(`./plugins/${name}`);
  mod.init();
}

✓ Good

const plugins = ["auth", "analytics", "sentry"];
const mods = await Promise.all(
  plugins.map(name => import(`./plugins/${name}`))
);
mods.forEach(mod => mod.init());

How to fix

Move import() out of loops. Use Promise.all() to load multiple modules in parallel, or import them statically at the top of the file.

All rules