Minimierung: CSS-Selektoren umbenennen/kürzen?

Ich habe nach Tools gesucht, die HTML, CSS und JS zusammen minimieren. Damit meine ich nicht nur das Entfernen von Leerzeichen und Kommentaren, sondern auch das Kürzen von Selektoren.

Zum Beispiel

<div class="wrapper">
    <div class="sub-header"></div>
</div>

Zu:

<div class="eD"><div class="qw"></div></div>

Habe aber keine gefunden. Und das wird irgendwie durch die Tatsache untermauert, dass das Anzeigen von Quellen beliebter Websites wie GitHub, Reddit und sogar Facebook vollständige Klassennamen wie "Hauptcontainer" usw. enthüllt.

Gibt es also ein Tool, das das tut, was ich will?

Sie müssten über eine einzige Suite von Tools verfügen, die für die Minimierung von HTML, CSS und JS die besten ihrer Klasse sein könnten. Und der JS-Teil wäre ein wenig knifflig, denn wenn Klassennamen jemals mit Zeichenfolgenoperationen erstellt werden, wäre es nicht trivial sicherzustellen, dass Sie diese ohne Fehlalarme erhalten. Außerdem wird die tatsächliche Bandbreitennutzung einer Seite in den meisten Fällen von einigen wenigen Bildern dominiert, nicht von der HTML-Quelle der Seite.
Es gibt auch das mögliche Lesbarkeitsproblem. Wenn wir (im schlimmsten Fall) in eine Situation geraten, in der die einzige vorhandene Kopie Ihres Codes die bereitgestellte ist und Sie sie absichtlich verstümmelt haben, wird es ziemlich schwierig, damit zu arbeiten. Andererseits könnte dies zu einer (sehr) leichten Verschleierung führen, denke ich.
Wenn Ihre Entwicklungsprozesse die Masterkopie verlieren und Ihnen nur noch die bereitgestellte Version bleibt, haben Sie viel schlimmere Probleme als eine schwer verständliche Webseite. Die Leute haben die ganze Zeit über bereitgestellten Objektcode verwendet und schaffen es irgendwie (normalerweise), an der Quelle festzuhalten.

Antworten (1)

Wenn Sie immer noch nach einem Tool suchen, das diese Dinge handhabt. Es gibt ein Projekt namens "rename-css-selectors", wenn Sie den Code mit Knoten behandeln:

https://www.npmjs.com/package/rename-css-selectors

Es gibt auch ein Gruntplugin dafür:

https://www.npmjs.com/package/grunt-rcs

Dadurch werden alle CSS-Selektoren in HTML-, JS- und CSS-Dateien (eigentlich jede gewünschte Datei) minimiert. Ich habe am Ende 20 % der CSS-Dateigröße eingespart. Bald wird ein Gulpplugin veröffentlicht.

BEARBEITEN:

Die obige Antwort ist nur die Hälfte. Um Ihre Frage vollständig zu beantworten, können Sie verschiedene Tools kombinieren. Zusätzlich zum rename css selectorskönnen Sie den HTML-Minifier von verwenden kangax. Damit sparen Sie 30% auf HTML-Dateien:

https://github.com/kangax/html-minifier

Es gibt auch ein Gruntplugin dafür:

https://github.com/gruntjs/grunt-contrib-htmlmin

Oder sogar schlucken:

https://www.npmjs.com/package/gulp-htmlmin

Insgesamt gibt es also kein Tool, das alles auf einen Schlag erledigt. Aber die Kombination verschiedener Tools/Pakete wird es für Sie tun.

Minimierung: CSS-Selektoren umbenennen/kürzen?
AntwortenHierDatenschutz-Bestimmungen1y, 0v