Wie finde ich heraus, ob ein bestimmter JavaScript-Code tatsächlich verwendet wird?

Question

Ich mache einige JavaScript-Bereinigungsarbeiten an einem Legacy-Projekt und versuche, redundante JS-Bibliotheken loszuwerden. Ich habe alle offensichtlichen getan (diejenigen, die überhaupt keine Referenzen sind). Aber es gibt eine Reihe von JS-Dateien, die auf allen Seiten enthalten sind (über Kacheln).

Wie kann ich herausfinden, ob sie tatsächlich verwendet werden, kurz durch den Inhalt von jedem gehen und suchen Sie nach jeder Funktion in ihnen? Gibt es einen klüger/einfacheren Weg, dies zu tun? Es ist ein Java-basiertes/Spring-Projekt, wenn das übrigens hilft.

Answer 1

Ich denke, es gibt keinen einfachen Weg.

Sie können die Skriptverweis entfernen, führen Sie Ihre Website mit dem Browser Debugger aktiviert, und sehen Sie, ob es einen "Funktion nicht gefunden" Fehler gibt.

Aber Sie werden jede einzelne Funktionalität in Ihrer Website testen müssen ...

Edit:

nun ein Feature in Chrom Entwickler-Tools gibt es, die dies für Sie tun können:

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

1) Öffnen Sie das Befehlsmenü. 2) Beginnen Sie mit der Eingabe von Coverage und wählen Sie Show Coverage.

Answer 2

Ich würde vorschlagen, Spione für diese Aufgabe zu verwenden. Sie werden in TDD verwendet, um zu testen, ob Funktionen aufgerufen werden, so dass man feststellen kann, ob Aufrufe tatsächlich stattfinden.

Wenn Sie Glück haben, dass diese js-Bibliotheken in einem Konstruktor oder auf andere Weise initialisiert werden, würde ich Ihnen vorschlagen, diese init-Funktionen auszuspionieren.
Wenn nicht möchten Sie vielleicht alle Funktionen ausspionieren, aber das ist schmerzhaft, besonders wenn Sie große Bibliotheken haben, in diesem Fall würde ich vorschlagen, eins nach dem anderen zu gehen.

In der Vergangenheit habe ich Jasmine oder Sinon.JS für diese Aufgabe verwendet haben, folgt ein Beispiel:

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

Sobald Sie Spione Setup auf die richtigen Funktionen haben, dann sollte es nur eine Frage der Kontrolle, wenn sie Angerufen oder nicht, Sie könnten einen Anruf an das Mischpaneel machen (das erste Beispiel, das Ihnen in den Sinn kommt), mit einigen Informationen darüber, damit Sie später sehen können, welche Funktionen aufgerufen werden und welche nicht.

Answer 3

Eines der neuesten Updates von den Chrome-Entwicklungstools enthält jetzt eine JS- und CSS-Abdeckung, über die Sie Ihren nicht verwendeten Code sehen können.

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

Sie können auch einen Versuch purifycss geben.

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]