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
Controllare se un branch esiste nel remote con un workflow di GitHub
Organizzare i moduli sfruttando CommonJS
3 metodi JavaScript che ogni applicazione web dovrebbe contenere - Parte 2
Sviluppo applicazioni x-plat con .NET MAUI
Sviluppare applicazioni serverless con Azure Container Apps
Utilizzare il metodo reduce in JavaScript
Trasformare qualsiasi backend in un servizio GraphQL con Azure API Management
Effettuare il download di un file via FTP con la libreria FluentFTP di .NET
Modernizzare le applicazioni WPF e Windows Forms con Blazor
Impostare dinamicamente il nome di una run di un workflow di GitHub
Determinare lo stato di un pod in Kubernetes
Chiamare un endpoint ASP.NET Core protetto da Certificate Authentication
