Analisi delle performance di Webpack

Non c’è niente di più noioso che dover aspettare che il compilatore termini il proprio lavoro.

Chiunque programmi per applicazioni per il web con buona probabilità avrà avuto il piacere di imbattersi in Webpack. Webpack, grazie alla sua flessibilità e all’enorme quantità di loader e plugin disponibili, è diventato lo standard per la creazione di bundle di asset JS e CSS.

La creazione dei bundle tipicamente non richiede più di qualche secondo per essere completata ma al crescere del numero di asset il tempo necessario a terminare il processo può crescere notevolmente. Ad esempio, nel caso del backoffice di Slope, la creazione dei bundle era arrivata a superare il minuto. Decisamente troppo.

In questo articolo voglio raccontarti come ho migliorato le performance di Webpack utilizzando vari accorgimenti.

Source: https://xkcd.com/303

Ottimizzazione

Per ottimizzare i tempi di build, la documentazione di Webpack, riporta:

Use the latest webpack version. We are always making performance improvements.  […] Staying up-to-date with Node.js can also help with performance. On top of this, keeping your package manager (e.g. npm or yarn) up-to-date can also help. Newer versions create more efficient module trees and increase resolving speed.

documentazione di Webpack

Sulla base di quanto suggerito dalla documentazione ho deciso di provare, utilizzando il backoffice di Slope come benchmark, quale fosse l’impatto dovuto a:

  • Aggiornamento di Webpack dalla versione 3 alla versione 4
  • Avanzamento di Yarn dalla versione 1.19.0 alla versione 1.22.0
  • Avanzamento della versione di Node dalla 8.16.0 alla 12.11.1

Metodo di prova

La prova è stata eseguita su di un PC con le seguenti caratteristiche tecniche:

ProcessoreIntel(R) Core(TM) i5-7600 CPU @ 3.50GHz × 4
Memoria16384 MB (DDR4)
DiscoSamsung SSD 850 (250GB)
Scheda graficaRadeon RX 580 Series (POLARIS10, DRM 3.33.0, 5.3.0-40-generic, LLVM 9.0.0)
OSUbuntu 18.04.4
Kernel5.3.0-40-generic (x86_64)

Le performance sono state misurate utilizzando il BackOffice di Slope. Il progetto è basato su Symfony 4.2.8 e contiene al suo interno circa 190 file Javascript/TypeScript e circa 60 file CSS/SCSS.

Per verificare le performance è stato misurato il tempo necessario alla creazione dei bundle nelle seguenti condizioni:

  • configurazione con Webpack 3, Yarn 1.19.0, Node 8.16.0
  • configurazione con Webpack 4 , Yarn 1.19.0, Node 8.16.0
  • configurazione con Webpack 4 , Yarn 1.22.0, Node 8.16.0
  • configurazione con Webpack 4 , Yarn 1.19.0, Node 12.11.1
  • configurazione con Webpack 4 , Yarn 1.22.0, Node 12.11.1

Per ogni configurazione è stata eseguita una prima prova per fare il warm-up della cache (prova 0) e una serie di 10 build consecutive.

Build di development

Come prima prova ho analizzato il tempo necessario ad eseguire la build di development. Nella configurazione di Webpack di sviluppo è abilitata la creazione delle sourcemaps e il linting del codice JS/TS mentre è disattivata la minificazione del codice.

Webpack 3Webpack 4Yarn 1.22.0Node 12.11.1Node 12.11.1 + Yarn 1.22.0
Prova 050,1421,7221,8219,5119,35
Prova 150,4418,4618,8015,9715,82
Prova 250,7018,3915,5615,7615,78
Prova 350,1718,9718,7515,8515,68
Prova 449,1218,6817,7815,9515,63
Prova 550,2818,5718,7815,8915,81
Prova 650,5618,4118,4915,7815,70
Prova 749,3719,0619,9515,9515,86
Prova 849,4219,9518,8815,9415,76
Prova 950,3516,6218,8816,0315,95
Prova 1050,5018,6718,8015,8715,68
Esecuzione delle prove di compilazione nelle varie configurazioni. Tempi in secondi.
Tempo di build nelle varie configurazioni (minore è meglio)
Webpack 3Webpack 4Yarn 1.22.0Node 12.11.1Node 12.11.1 + Yarn 1.22.0
Media50,0618,7819,0716,2316,09
Media (esclusa prova 0)50,0918,4818,7715,9015,77
*Tempi in secondi

Dall’analisi dei risultati si nota chiaramente come il solo passaggio da Webpack 3 a Webpack 4 riduca notevolmente il tempo di creazione della build (circa il 60% in meno!).
Analizzando le performance con Webpack 4 invece è possibile notare come l’effetto del singolo avanzamento di versione di Yarn introduca un trascurabile peggioramento delle performance mentre l’effetto dell’aggiornamento di Node da solo introduca una riduzione dei tempi di build di circa il 10%.

Trovo molto interessante notare anche il fatto che, mentre il singolo aggiornamento di Yarn sembri peggiorare le performance, l’utilizzo congiunto delle ultime versioni di Node e Yarn faccia perdere alla build qualche frazione di secondo sul tempo di esecuzione.

Build di produzione

Nella seconda configurazione di prova ho utilizzato la build di produzione di Webpack. In questa configurazione sono disattivati i processi di linting del codice JS/TS e la creazione delle sourcemaps mentre invece risulta attiva la fase di minificazione del codice.

Webpack 3Webpack 4Yarn 1.22.0Node 12.11.1Node 12.11.1 + Yarn 1.22.0
Prova 076,3537,5336,5632,5632,73
Prova 174,6920,8220,7718,3618,21
Prova 275,7820,7820,8618,3618,12
Prova 373,5320,7720,7918,2818,15
Prova 473,6320,6320,5618,1918,08
Prova 572,0020,8420,9118,3018,13
Prova 672,3721,0720,8318,5118,17
Prova 773,4020,9720,8018,2518,15
Prova 874,2321,0220,9618,6918,16
Prova 973,9520,8720,8218,8018,12
Prova 1073,0821,0921,0018,3718,14
Esecuzione delle prove di compilazione nelle varie configurazioni. Tempi in secondi.
Tempo di build nelle varie configurazioni (minore è meglio)
Webpack 3Webpack 4Yarn 1.22.0Node 12.11.1Node 12.11.1 + Yarn 1.22.0
Media73,9922,5322,3919,7119,47
Media (esclusa prova 0)73,6720,8920,8318,4118,14
*Tempi in secondi

Anche in questo caso il passaggio da Webpack 3 a Webpack 4 si conferma come il miglior investimento per abbattere i tempi di esecuzione della build (circa il 70% in meno).
Contrariamente alla build di development l’accoppiata Webpack 4 + Yarn 1.22.0 non peggiora le performance ma il guadagno di tempo risulta essere praticamente trascurabile (-0,27% escludendo la prova 0). Anche in questo caso l’avanzamento di versione di Node invece permette di migliorare le performance di un ulteriore 10% rispetto ai tempi di Webpack 4.

Anche in questo caso l’aggiornamento combinato di Webpack 4, Node 12.11.1 e Yarn 1.22.0 permette di guadagnare una manciata di secondi sul tempo di build.

Conclusioni

Le prove eseguite sembrano confermare esattamente quanto riportato dalla guida di Webpack. Il miglior investimento possibile per migliorare le performance della build di Webpack è quello di utilizzare sempre la versione più recente del tool.

Una volta aggiornato Webpack all’ultima versione, dovendo scegliere se aggiornare Node o Yarn non c’è dubbio che la scelta migliore sia quella di investire tempo nell’aggiornamento di Node (guadagnando circa un 10% di tempo in meno).

Solo in ultima istanza conviene aggiornare Yarn il cui effetto sui tempi di build risulta essere praticamente trascurabile.

Come ultima nota c’è da considerare che lo sforzo necessario ad ogni aggiornamento è direttamente proporzionale al guadagno ottenuto. Mentre aggiornare Yarn non richiede più di qualche minuto, aggiornare Node e soprattutto Webpack può richiedere più di qualche ora.


Se questo post ti è stato utile puoi farmelo sapere lasciando un commento qui sotto oppure scrivendomi direttamente a t.me/lorenzomillucci.
Inoltre ti invito ad iscriverti al mio canale Telegram e a seguirmi su Twitter per non perderti nemmeno un post del mio blog. A presto!

Software engineer presso Slope.
Appassionato di videogame, nel tempo libero mi diletto a scrivere su questo blog.
Per non perderti nemmeno un post puoi seguirmi su Telegram!

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *