Gibt es vor der Bereitstellung ein Tool zum Komprimieren von HTML-Klassenattributen und CSS-Selektoren?

Lesezeit: 6 Minuten

Benutzer-Avatar
steveyang

Im aktuellen Projekt wurde ich gebeten, das HTML-Klassenattribut und die entsprechenden CSS-Selektoren zu komprimieren vor dem Einsatz. Zum Beispiel, der Code auf der Produktion ist:

<div class="foo">
  <div id="bar"></div>
</div>

.foo {/*Style goes here*/}
#bar {/*Style goes here*/}

Beim Einsatzmöchte ich, dass die HTML-Klasse und die entsprechenden CSS-Selektoren ersetzt werden:

<div class="a">
  <div id="b"></div>
</div>

.a {/*Style goes here*/}
#b {/*Style goes here*/}

Welche verfügbaren Tools gibt es, um diese Komprimierung zu archivieren?

  • Der Unterricht sollte lesbar und verständlich sein, das würde man im wirklichen Leben nicht machen (eigentlich eine ziemlich schlechte Idee) und wahrscheinlich eine sinnlose Aufgabe. Die Optimierung von Selektoren ist jedoch eine gute Idee. Was ist deine Frage?

    – Wesley Murch

    9. November 2011 um 15:47 Uhr


  • Sie brauchen eine Methode, um “.foo” in “.a” und “#bar” in “#b” in Ihrem CSS und Ihrem HTML umzuwandeln?

    – Gallen

    9. November 2011 um 15:49 Uhr

  • @Madmartigan Sie sollten beim Entwickeln lesbar und verständlich sein, es gibt keinen Grund, warum Sie sie beim Veröffentlichen der Site nicht komprimieren könnten. Es gibt viele Websites, die dies tun. Schauen Sie sich beispielsweise die Quelle bei Google Plus an.

    – Niklas

    9. November 2011 um 15:50 Uhr

  • Ja, ich suche nach einem HTML/CSS-Kompressor, um diese Aufgabe vor der Bereitstellung abzuschließen.

    – steveyang

    9. November 2011 um 15:56 Uhr

  • Hast du eine Lösung gefunden?

    – Adrian Neatu

    9. Januar 2014 um 16:03 Uhr

Benutzer-Avatar
Litek

Wenn Sie Klassennamen wirklich umbenennen möchten (unter Berücksichtigung dessen, was Madmartigan gesagt hat) Google Closure-Stylesheets macht das. Es ist ein Overkill, und YUI Compressor oder ein anderes Minifizierungs- + Gzipping-Tool sollte Ihnen genug Leistungsschub geben, aber es kann es tun. Sie müssen andere Closure-Tools verwenden, um entsprechende Änderungen an Ihrem vorzunehmen .js Dateien und HTML-Vorlagen.

Benutzer-Avatar
Jan Peer

Es gibt auch ein Projekt namens “rename-css-selectors”, wenn Sie den Code mit Knoten behandeln:

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

Es gibt Plugins für fast jedes Build-Tool (Webpack, Päckchen, Gulp, …):

https://github.com/JPeer264/node-rcs-core#plugins

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.

Das ist erstaunlich kurzsichtig.

  • Schritt 1: Aktivieren Sie die GZip- oder Zlib-Komprimierung im Webserver
  • Schritt 2: Der gesamte Text wird komprimiert, oft um 70 % oder mehr
  • Schritt 3: Es gibt keinen Schritt 3.
  • Schritt 4: GEWINN

  • Ich empfehle jedem, der ablehnt, zu erklären, warum es besser ist, 0,1 % auf Kosten der Lesbarkeit des Codes zu sparen, anstatt Tonnen kostenlos zu sparen. Wenn Sie bereits im Webserver komprimieren, bewirken diese Bearbeitungen NICHTS, da die Komprimierung bereits allgemeine Sequenzen vereinfacht.

    – Tyler Traufe

    9. November 2011 um 15:52 Uhr


  • Nein gibt es nicht. Moderne, auch nicht so moderne Kompressoren wie zlib sind sehr gut darin, redundante Informationen zu entfernen. Das ist ihre Aufgabe. Wie groß sind diese HTML-Dateien, dass dies überhaupt ein Problem darstellt?

    – Tyler Traufe

    9. November 2011 um 16:14 Uhr


  • gzip gilt nicht für lokale Dateien, die über bereitgestellt werden file:. Für eine 12-MB-Referenzdatei (ja, ein Beispiel aus der Praxis, das ich mir gerade anschaue) ist diese glatte Nichtantwort auf die Frage nicht hilfreich. Die Einsparungen beim Bereinigen einer Datei mit ausführlichen Namen wie in meiner Datei sind nicht “0,1%”, sie betragen mehrere Prozent. (Dies ist jedoch ein vernünftiger Rat für diejenigen, die HTTP 1.1+ verwenden.)

    – Phrogz

    5. Juni 2012 um 16:05 Uhr


  • Sie benötigen KEINE Code-Lesbarkeit für die Produktion! siehe Google, Facebook und jede andere große Website. Alle Klassen und IDs werden komprimiert, um möglichst viele Bytes von HTML und CSS einzusparen. Niemand sollte sich jemals um die Lesbarkeit der Produktion kümmern. Das nur Parameter ist Leistung.

    – vsync

    4. September 2014 um 9:50 Uhr


  • @vsync Ich würde “Sicherheit” auch in der Produktion zu “Leistung” hinzufügen 🙂

    – Gillytech

    26. Mai 2016 um 19:19 Uhr

Gegen die Minimierung mit gzipping ist nichts einzuwenden, selbst bevor moderne Browser Quellkarten einführten, war die Minimierung eine bewährte Methode, da Sie auch in Verbindung mit gzipping immer noch erhebliche Einsparungen erzielen können. Wir haben eine schlechtere Lesbarkeit in der Produktion in Kauf genommen, weil sich die Leistungsverbesserung gelohnt hat. Jetzt mit Quellkarten können wir unseren Kuchen haben und ihn auch essen. Hier ist ein guter Artikel, der die Auswirkungen der Kombination von Minifizierung mit gzip auf HTML-Seiten für große Websites demonstriert: http://madskristensen.net/post/effects-of-gzipping-vs-minifying-html-files

Der Unterschied in den Einsparungen, die Sie erzielen, variiert sehr stark je nach Glyphenverteilung des zu minifizierenden Codes, sodass die Ergebnisse je nach Minifizierungsstrategie und der zu minifizierenden Sprache und sogar nur je nach Codierungsstil variieren. Im durchschnittlichen Fall sind die Einsparungen immer noch erheblich.

Die Verkleinerung behandelt mehr als nur das Kondensieren von Glyphen, sie kann auch den Code umstrukturieren, um nicht benötigte Zeichen zu entfernen, während der gleiche Effekt erzielt wird, etwas, das gzipping nicht kann.

Um nun auf Ihre spezielle Frage zurückzukommen, möchten Sie in Ihrem Fall Klassenglyphen verkleinern. Dies ist aus mehreren Gründen schwieriger. Der Geltungsbereich dieser Glyphen liegt zwischen mehreren Dateien, im Gegensatz zu der Möglichkeit, sie auf lokale Teile einer Datei zu beziehen. Beim Minimieren von Javascript werden globale Bereichsvariablen standardmäßig nicht ersetzt, da sie möglicherweise in einem anderen Skript benötigt werden, aber bei CSS wissen Sie nicht, welche Klassen lokal sind und welche möglicherweise in einer anderen Datei definiert sind. Um die Sache noch schlimmer zu machen, müssen Sie auch die Klassenersetzung mit Javascript synchronisieren, da es sehr üblich ist, DOM-Elemente im Code über Klassen zu finden. Es wäre unmöglich, dies zu synchronisieren, da Klassen möglicherweise dynamisch in Javascript erstellt werden, und selbst ohne dieses Problem wäre es eine große Tortur. Sie können die Glyphenersetzung nur in Javascript synchronisieren, wenn Sie Ihren Codierungsstil ändern, um sicherzustellen, dass Sie explizit angeben, wo CSS-Klassenzeichenfolgen verwendet werden: https://code.google.com/p/closure-stylesheets/#Umbenennung

Glücklicherweise ist das Ersetzen von Glyphen das, was die Minimierung bewirkt, was gzipping auch sehr, sehr gut macht, sodass die Größeneinsparungen durch diese spezielle Minimierungsstrategie viel, viel geringer sind als bei den anderen Strategien, die Glyphen vollständig entfernen.

Es gibt auch Schluck-Selektoren.

Es installieren:

npm install gulp gulp-selectors

Jetzt ein Quick-and-Dirty node Skript:

var gulp = require('gulp');
var gs = require('gulp-selectors');
gulp
  .src(['*.html', '*.css'])
  .pipe(gs.run({}, '{ids: "*"}'))
  .pipe(gulp.dest('.'))'

Das zweite Argument zu gs.run() ist, damit es IDs unverändert lässt, siehe auch seine Website: https://www.npmjs.com/package/gulp-selectors

Benutzer-Avatar
Litek

Für CSS gibt es YUI-Kompressor. Es wird unnötigen Leerraum entfernen und Ihre Eigenschaften in Kurzschrift umwandeln, wenn Sie es nicht bereits verwenden. Was HTML angeht, kenne ich keine, aber denken Sie daran, dass das Trimmen von Leerzeichen in HTML nicht immer sicher ist.

Benutzer-Avatar
Wreschtsch Wolodymyr

Es gibt ein Plugin
https://github.com/vreshch/optimize-css-classnames-plugin
Arbeiten Sie als Webpack Loader. Das dürfte in den meisten Fällen funktionieren

1215890cookie-checkGibt es vor der Bereitstellung ein Tool zum Komprimieren von HTML-Klassenattributen und CSS-Selektoren?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy