Utilizzare il browser per rilevare Javascript e CSS non utilizzati nel codice
L'utilizzo di file JavaScript e CSS è facile e funzionale all'interno di applicazioni web: possiamo scrivere degli stili e funzioni che modificano l'aspetto di tutta la pagina. Ma cosa accade quando facciamo modifiche alla parte HTML, cambiando classi o rimuovendo elementi? Molto probabilmente inseriremo altro codice per gestire le nuove parti, ma raramente andremo a rimuovere il codice vecchio, perchè come sempre accade, ci troveremo a pensare "meglio lasciarlo, prima che rompa qualcosa di cui al momento non ricordo la presenza".
Con Google Chrome/Microsoft Edge possiamo nativamente intercettare tutto il codice inutilizzato nella pagina, semplicemente aprendo i DevTools e accedendo alla sezione Copertura/Coverage, visualizzabile attraverso il comando Ctrl+Shift+P e cercando la sezione sopracitata.
La sezione si mostrerà come pannello, all'interno del quale verrà richiesto il ri-caricamento della pagina, conseguentemente al quale verranno mostrate le statistiche di copertura. Prendendo il codice seguente come esempio possiamo facilmente intuire quali siano le parti utilizzate e quali invece possano essere rimosse.
<head>
<style>
div.nonUtilizzato{
display: block;
}
</style>
</head>
<body>
<script>
// utilizzata
window.onload = function() {
console.log('ciao')
};
function nonUtilizzata() {
console.log('ciao');
}
</script>
</body>
Utilizzando lo strumento fornito dal browser avremo lo stesso riscontro.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Utilizzare Tailwind CSS all'interno di React: primi componenti
Visualizzare le change sul plan di Terraform tramite le GitHub Actions
Generare la software bill of material (SBOM) in GitHub
Evitare il flickering dei componenti nel prerender di Blazor 8
Utilizzare Azure Cosmos DB con i vettori
Usare un KeyedService di default in ASP.NET Core 8
Utilizzare Azure AI Studio per testare i modelli AI
Supporto ai tipi DateOnly e TimeOnly in Entity Framework Core
Eseguire i worklow di GitHub su runner potenziati
Gestire il colore CSS con HWB
Gestire la cancellazione di una richiesta in streaming da Blazor
Utilizzare gRPC su App Service di Azure
