Il codice JavaScript minificato è una versione del codice sorgente originale compressa per ridurre la dimensione del file e migliorare le prestazioni nel caricamento delle pagine Web. Il processo di minificazione comporta la rimozione di tutti gli elementi non essenziali del codice, come spazi bianchi (indentazioni, spazi e interruzioni di riga), commenti, nomi di variabili e funzioni non necessarie (sono automaticamente abbreviate, con la sostituzione diretta), caratteri superflui.
Obiettivo della minificazione è ridurre al minimo la quantità di dati che devono essere trasferiti dal server al browser dell’utente, accelerando così il tempo di caricamento della pagina. Il codice minificato diventa di difficile lettura per un essere umano, poiché risulta compatto e privo di formattazione. Ecco che accorre in aiuto il chatbot ChatGPT e il sottostante modello generativo.
Perché ChatGPT diventa utile per leggere il codice JavaScript minificato
Uno strumento come ChatGPT, basato sui recenti modelli generativi GPT-4o, si rivela sorprendentemente efficace nell’attività di “unminifying“, ovvero nel ripristino della leggibilità del codice minificato.
Frank Fiegel racconta di aver trovato un componente interessante su un sito Web che generava un’animazione in stile ASCII art. Curioso di studiarne il funzionamento, lo sviluppatore ha cercato di analizzare il codice, scoprendo che risultava minificato.
Di solito, è possibile provare dei servizi di deminificazione del codice JavaScript, pubblicamente accessibili via Web. In alternativa, si può generare un file .map
per mappare il codice minimizzato e renderlo più comprensibile.
Il modello generativo di OpenAI ripristina codici illeggibili
Utilizzando ChatGPT, tuttavia, e passando al chatbot di OpenAI il codice JavaScript minimizzato, si scopre che l’intelligenza artificiale può “fare miracoli” nel ripristinare la leggibilità di qualsiasi sorgente. Non solo. ChatGPT ha fornito una spiegazione dettagliata e comprensibile delle varie parti del codice, identificando le funzioni e i componenti chiave.
Come spiega Fiegel, il chatbot ha messo in evidenza il codice che seleziona il set di caratteri da utilizzare per generare l’ASCII art, la funzione che calcola quali caratteri usare in base alla posizione di ciascun elemento e al tempo, il componente React utile alla visualizzazione del contenuto dinamico.
Il ricercatore ha infine chiesto a ChatGPT di riscrivere il codice in TypeScript, rendendolo ancora più leggibile per un essere umano. Il risultato è stato un codice TypeScript chiaro e ben strutturato, che riproduceva esattamente la funzionalità del codice originale, ma in una forma più accessibile e comprensibile.
Se ce ne fosse stato il bisogno, l’esperimento costituisce un’ulteriore riprova di come i Large Language Models (LLM), come GPT-4o, siano determinanti nell’aiutare i programmatori a comprendere e lavorare con codice complesso e minificato, migliorando così la produttività e la leggibilità del codice.
Codice minificato e offuscato: differenze
Anche al di là di JavaScript, ci sono delle importanti differenze tra il codice minificato e quello che è invece offuscato.
L’oscuramento od offuscamento ha come scopo principale quello di rendere il codice difficile da comprendere per un essere umano. È una tecnica usata per rendere più arduo il reverse engineering o la copia del codice. Può quindi includere la rinominazione di variabili e funzioni con nomi senza significato, l’inserimento di codice non necessario, la sostituzione di stringhe con versioni codificate o criptate, e altre trasformazioni che complicano l’analisi del codice.
Viceversa, nella minificazione l’obiettivo è quello di ridurre la dimensione del file per migliorare le prestazioni. La leggibilità umana è sacrificata, ma non è l’obiettivo principale di questo tipo di attività.
Credit immagine in apertura: iStock.com – Anastasiia Voronina