Qualche settimana fa sono stato a Bari da un cliente, e abbiamo passato due giorni ad ottimizzare il processo di build della Angular-CLI, in uno scenario avanzato. Il back-end è stato realizzato con Asp.Net Core, e da questa esperienza estrarrò alcuni blog post, di cui questo è il primo.

Dopo aver portato il progetto da una configurazione Gulp, basata su SystemJS, a Webpack con Angular-CLI, alla prima build l’applicazione non partiva. Temevamo che alcune dipendenze legacy non fosseto “bundlizzate” nel pacchetto finale, dato che l’applicazione startava senza problemi con il comando ng serve.

Investigando sul problema, abbiamo scoperto, grazie a Gianluca, un fantastico tool chiamato Webpack Bundle Analyzer (https://www.npmjs.com/package/webpack-bundle-analyzer), che mostra il contenuto del bundle in un report visuale nel browser. L’uso è davvero semplice:

• Create una build Angular CLI con il comando ng build –prod –stats-json (–prod è opzionale, funziona bene anche con –dev). Questo genera una classica  build con un file in più, stats.json, con tutte le informazioni sul processo di build.
• Nella root del progetto installate il pacchetto nelle dipendenze di sviluppo: npm install –save-dev webpack-bundle-analyzer.
• Aggiungete al package.json uno script del tipo “build-bundle-report”: “webpack-bundle-analyzer dist/stats.json” ed eseguite il comando npm run build-bundle-report.

Questo è il risultato:

Potete esplorare il bundle zoomando verso l’interno e verso l’esterno i vari blocchi, verificando se tutti i pacchetti di cui avete biosgno sono nel bundle. Alla fine il nostro problema non era il bundle, ma è stato molto utile per escludere il problema.

Happy coding!