Agitazione dell’albero con Webpack 2

L’agitazione degli alberi è un concetto importante che sta guadagnando molta copertura negli ultimi mesi. Webpack2 è stato recentemente rilasciato e l’agitazione degli alberi è una delle caratteristiche più interessanti e attese di questa versione.

Questo articolo ti fornirà una comprensione di base dei concetti con l’aiuto di un esempio.

Cosa sta scuotendo l’albero?

L’agitazione dell’albero rimuove sostanzialmente il codice inutilizzato dal codice fornendo così un pacchetto altamente ottimizzato, riducendo sostanzialmente le dimensioni del carico utile che potrebbe essere un aumento delle prestazioni e facilitando la manutenzione.

Supporta i moduli ES6 nativi senza convertirli in formato CommonJS. Questo è un grande vantaggio poiché non è possibile scuotere l’albero con i moduli JS comuni.

Com’è il processo?

Il processo è diviso in 2 passaggi

  1. File bundle singolo : Webpack2 crea innanzitutto un file bundle singolo di tutti i moduli ES6 nel codice e se un’esportazione non viene importata ovunque venga rimossa.
  2. Minificazione : successivamente il pacchetto viene minimizzato e tutto il codice morto viene rimosso. Come risultato del primo passo, l’eliminazione del codice morto può rimuovere le esportazioni inutilizzate.

Configurazione

Webpack2 è in grado di analizzare e comprendere tutti gli ES6 e i frullati solo se rileva un modulo ES6. Tuttavia, solo le importazioni e le esportazioni vengono trasferite in ES5. Se si desidera che tutto il bundle sia in ES5, è necessario un transpiler per le parti rimanenti di ES6.

Il primo passo è installare webpack2

  npm install --save [email protected] 

Quindi, installa la preimpostazione di Babel dei moduli nativi es2015 per la parte di transpiling

  npm install --save es2015-native-module 

Aggiungi il plugin al file .babelrc

  //.babelrc 
{
preset: ["es2015-native-modules"]
}

Aggiungi il flag optmize-minim allo script di build per il processo in 2 passaggi di cui abbiamo parlato prima

  //package.json 
  "script": { 
"build": "webpack-optimise-minim"
}

Consente di scrivere una libreria di saluti con diversi tipi di saluti.

  //greetings.js 
  funzione export sayHello () { 
ritorna "Ciao a tutti";
}
  funzione di esportazione sayHi () { 
ritorna "Ciao a tutti";
}

consente di importare questo nel nostro index.js. Importeremo solo sayHi () per il nostro progetto.

  //index.js 
  importare {sayHi} da './greetings.js'; 
  let elem = document.getElementById ('greeting'); 

elem.innerHTML = '$ {(sayHi ())};

Successivamente consente di creare il codice.

  npm run build 

Di seguito è riportato il pacchetto dopo aver creato il codice.

  funzione (t, n, r) { 
funzione e () {
return "Ciao a tutti"
}

n.sayHi = e
}

Successo !! La funzione sayHello () non fa parte del bundle in quanto non è stata importata ed è stata rimossa come parte dell’eliminazione del codice morto.

Vedo che tremare gli alberi ha molto valore quando importiamo enormi librerie come lodash, jquery e finiamo per usare solo poche funzioni e gonfiare il nostro bundle senza motivo.

Sono entusiasta di vedere come questo concetto si evolve e diventa parte dell’ecosistema centrale con Webpack che è una scelta popolare tra molti sviluppatori.

risorse

  1. Webpack2: https://webpack.github.io/docs/roadmap.html
  2. Babele : https://babeljs.io/