# 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:

```javascript
// 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:

```javascript
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**

```javascript
// 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í:

```javascript
// 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ů**

```javascript
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:

```javascript
// 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();
}
```