Come scoprire se un determinato codice javascript è effettivamente utilizzato?

Question

Sto facendo un po 'di lavoro di pulizia di JavaScript su un progetto precedente e sto cercando di sbarazzarmi delle librerie JS ridondanti. Ho fatto tutti quelli ovvi (quelli che non sono riferimenti da nessuna parte). Ma ci sono un certo numero di file JS che sono inclusi in tutte le pagine (tramite tiles).

Come posso sapere se sono effettivamente utilizzati, a parte il contenuto di ciascuno e la ricerca di ciascuna funzione al loro interno? C'è un modo più intelligente/più semplice per fare questo? È un progetto basato sulla java/Spring, se questo aiuta a proposito.

Answer 1

Penso che non ci sia un modo semplice.

È possibile rimuovere il riferimento allo script, eseguire il sito con il debugger del browser attivato e verificare se è presente un errore "funzione non trovata".

Ma dovrete mettere alla prova ogni singola funzionalità nel tuo sito ...

Edit:

Ora c'è una caratteristica in strumenti Chrome dev che può fare questo per voi:

https://developers.google.com/web/updates/2017/04/devtools-release-notes

1) Aprire il menu dei comandi. 2) Iniziare a digitare Copertura e selezionare Mostra copertura.

Answer 2

Suggerisco di utilizzare spie per questa attività. Sono utilizzati in TDD per verificare se le funzioni sono chiamate, in modo da poter affermare se le chiamate stanno effettivamente accadendo.

Se siete abbastanza fortunati quelle librerie js sono inizializzate in un costruttore o in qualche altro modo, in tal caso vi suggerisco di spiare queste funzioni di init.
Se non si potrebbe voler spiare tutte le funzioni, ma questo è doloroso soprattutto se si dispone di grandi librerie, in tal caso suggerirei di andare uno per uno.

In passato ho usato Jasmine o Sinon.JS per questo compito, segue un esempio:

it('should be able to login', function() { 
    spyOn(authobj, 'isEmpty'); 
    authobj.login('abc', 'abc'); 
    expect(authobj.isEmpty).toHaveBeenCalled(); 
}); 

Dopo aver installato spie sulle funzioni proprie allora dovrebbe essere solo una questione di controllare se sono chiamato o no, è possibile effettuare una chiamata a mixpanel (primo esempio che viene in mente) con alcune informazioni a riguardo, in modo che in seguito sia possibile vedere quali funzioni vengono chiamate e quali no.

Answer 3

Uno degli ultimi aggiornamenti dagli strumenti di chrome dev include ora una scheda di copertura JS e CSS che consente di visualizzare il codice inutilizzato.

https://developers.google.com/web/updates/2017/04/devtools-release-notes

1) Open the Command Menu. 
2) Start typing Coverage and select Show Coverage. 

Answer 4

Si può anche dare una prova per purifycss.

CLI usage:

$ npm install -g purify-css 

purifycss <css> <content> [option] 

Options: 
    -m, --min  Minify CSS       [boolean] [default: false] 
    -o, --out  Filepath to write purified css to     [string] 
    -i, --info  Logs info on how much css was removed 
                 [boolean] [default: false] 
    -r, --rejected Logs the CSS rules that were removed 
                 [boolean] [default: false] 
    -w, --whitelist List of classes that should not be removed 
                  [array] [default: []] 
    -h, --help  Show help           [boolean] 
    -v, --version Show version number         [boolean]