Code-Splitting

Navigazione interna

Puoi dare un'occhiata a questo post, a questa pagina, tornare indietro alla homepage o all'archivio.

Impacchettamento

Molte applicazioni React hanno i loro file “impacchettati” usando strumenti come Webpack, Rollup oppure Browserify. Il processo di “impacchettamento” avviene prendendo tutti i file importati e unendoli tutti in un unico file, chiamato “bundle”. Questo file può essere poi incluso all’interno della pagina web per caricare l’intera applicazione tutta in una volta.

Esempio

App:

// app.js
import { add } from './math.js';

console.log(add(16, 26)); // 42

// math.js
export function add(a, b) {
  return a + b;
}

Bundle:

function add(a, b) {
  return a + b;
}

console.log(add(16, 26)); // 42

Nota:

I tuoi pacchetti avranno un aspetto molto diverso da questo.

Se state usando Create React App, Next.js, Gatsby, o qualche tool simile, potreste avere una configurazione di Webpack che effettua il processo d’impacchettamento della tua applicazione.