Výhody dynamických importů v JavaScriptu

Výhody dynamických importů

1. Code splitting (rozdělení kódu)

Místo načtení celé aplikace najednou můžeš načítat moduly až když jsou potřeba:

// Běžný statický import
import { heavyFunction } from './heavyModule.js';

// Dynamický import - načte se jen když je potřeba
button.addEventListener('click', async () => {
  const { heavyFunction } = await import('./heavyModule.js');
  heavyFunction();
});

2. Podmíněné načítání

Můžeš načítat moduly jen za určitých podmínek:

async function loadFeature(featureName) {
  if (featureName === 'chart') {
    const { createChart } = await import('./chartModule.js');
    createChart();
  } else if (featureName === 'table') {
    const { createTable } = await import('./tableModule.js');
    createTable();
  }
}

3. Lazy loading (líné načítání) komponent v Nuxt/Vue

// Místo tohoto statického importu
import HeavyComponent from '@/components/HeavyComponent.vue';

// Můžeš použít dynamický import
const HeavyComponent = defineAsyncComponent(() => 
  import('@/components/HeavyComponent.vue')
);

4. Lepší výkon první načtení stránky

Zmenšíš hlavní bundle a zrychlíš tak první vykreslení:

// V Nuxt 3 můžeš dynamicky importovat i stránky
const routes = [
  {
    path: '/',
    component: () => import('./Home.vue')
  },
  {
    path: '/dashboard',
    component: () => import('./Dashboard.vue') // Načte se až při navigaci
  }
]

5. Práce s různými formáty souborů

async function loadConfigBasedOnEnvironment() {
  if (process.env.NODE_ENV === 'development') {
    return import('./config.dev.json');
  } else {
    return import('./config.prod.json');
  }
}

6. Lepší cachování v prohlížeči

Když změníš jeden modul, prohlížeč může znovu stáhnout jen tento modul, ne celý bundle.

7. Vyhnutí se problémům s cyklickými závislostmi

Dynamické importy mohou někdy pomoct vyřešit cyklické závislosti:

// moduleA.js
export function funcA() {
  console.log('Function A');
}

export async function funcThatUsesB() {
  const moduleB = await import('./moduleB.js');
  moduleB.funcB();
}

// moduleB.js
import { funcA } from './moduleA.js';

export function funcB() {
  console.log('Function B calls:');
  funcA();
}