web analytics

ALLES ÜBER vhs UND WIE ES AUF WEBSITES EINGESETZT WIRD

Untersuchte Extension

vhs

VHS: Fluid ViewHelpers

Sammlung von universell einsetzbaren ViewHelpers, die im Fluid Templatingmotor verwendet werden können die im Lieferumfang des TYPO3 CMS enthalten ist.

Installation

Installation mit Composer

Die empfohlene Art der Installation der Erweiterung ist die Verwendung von Composer. In Ihrer Composer-basierten TYPO3-Projekt-Root, benötigen composer einfach fluidtypo3/vhs.

Installation als Erweiterung aus dem TYPO3 Extension Repository (TER)

Download und Installation als TYPO3 Extension. Das ist es. Das ist es.

Einstellungen

Obwohl es keine statischen TypoScript-Dateien gibt, die eingebunden werden können, unterstützt VHS einige wichtige Einstellungen, die in TypoScript definiert sind:

Debug-Einstellungen

  • plugin.tx_vhs.settings.debug = 1 kann verwendet werden, um allgemeines Debugging zu ermöglichen, was dazu führt, dass Asset-Einschlüsse unmittelbar vor der Aufnahme in die Seite debuggt werden
  • plugin.tx_vhs.settings.asset.debug = 1 kann verwendet werden, um die Debug-Ausgabe von einzelnen Asset ViewHelper-Instanzen zu ermöglichen. Gilt, wenn ein ViewHelper den Parameter "debug" verwendet (wo dies unterstützt wird) und/oder wenn plugin.tx_vhs.settings.debug = 1.
  • plugin.tx_vhs.settings.useDebugUtility, das VHS veranlasst, das DebugUtility von Extbase zu verwenden, um Variablen auszugeben. Wenn diese Einstellung nicht definiert ist, wird ein Wert von 1 angenommen.

Vermögenswerte

VHS enthält eine sehr nützliche Funktion, mit der Sie Assets (CSS/JS/etc) in Fluid-Vorlagen, PHP und TypoScript definieren können. Was sich von den traditionellen Methoden zur Einbeziehung solcher Assets (in Fluid oder anderweitig) unterscheidet, wird unterschiedlich verwendet, unterschiedlich gesteuert und wahrscheinlich am schlimmsten ist, dass nicht alle von ihnen integratorfreundlich sind (wie in: erlaubt es, Assets mit TypoScript zu beeinflussen). VHS Assets löst all dies.

Asset-Beispiele

Die folgende Verwendung von Fluid:

<v:asset.script path="fileadmin/demo.js" />

Ist genau das gleiche wie das PHP:

\FluidTYPO3\Vhs\Asset::createFromFile('fileadmin/demo.js');

Das ist eine Kurzform von:

\FluidTYPO3\Vhs\Asset::createFromSettings(array((
    'Name' => 'Demo',
    Pfad' => 'fileadmin/demo.js'
));

Was selbst eine Kurzform von:

$asset = \FluidTYPO3\Vhs\Asset::getInstance();
// oder alternativ, wenn dies besser in Ihren anderen Code passt:
$asset = $objectManager->get('FluidTYPO3\\Vhs\\\Asset');
// Dann:
$asset->setName('demo');
$asset->setPath('fileadmin/demo.js');
$asset->finalize(); // manuell erstellte Assets müssen finalisiert werden, bevor sie erscheinen.

Das obige PHP macht genau das gleiche wie dieses TypoScript:

plugin.tx_vhs.settings.asset.demo.path = fileadmin/demo.js

Das ist eine Kurzform von:

plugin.tx_vhs.settings.asset.demo {
    name = Demo
    pfad = fileadmin/demo.js
}

Zusammenfassend lässt sich sagen: Unabhängig davon, wo und wie Sie VHS Assets verwenden, verwenden sie immer die gleichen Attribute, sie verhalten sich immer gleich, unterstützen die gleichen Funktionen (z.B. Abhängigkeit von anderen Assets unabhängig von der Reihenfolge der Aufnahme und Adressierung von Assets über einen Gruppennamen, um mehrere Assets zu betreffen - und rendern sogar JS/CSS, als wäre die Datei eine Fluid-Vorlage).

Die API für die Aufnahme ändert sich, aber das Ergebnis ist das gleiche.

Der eigentliche Vorteil von VHS Assets liegt jedoch in der TypoScript-Integration, mit der Sie die Einstellungen einzelner Assets (unabhängig davon, wie sie ursprünglich definiert wurden - Fluid, PHP, TypoScript) überschreiben können, indem Sie ihre Attribute in TypoScript festlegen. Dies ermöglicht es Integratoren, jeden Aspekt jedes Assets (aber nicht die auf herkömmliche Weise enthaltenen) bis hin zum Ersetzen der Skript- oder CSS-Inhalte, die eingefügt werden, oder zum Verschieben von JS-Dateien, die zusammengefügt werden, auf einen neuen CDN-Server zu steuern, ohne Abhängigkeiten und Ausführungsreihenfolge überhaupt zu unterbrechen.

Um VHS Assets über TypoScript zu beeinflussen, können die folgenden Einstellungen verwendet werden:

Asset-Einstellungen

plugin.tx_vhs.settings.asset.ASSETNAME {
    content = Text # Text # Text, der den Inhalt überschreibt
    path = FileReference # Wenn gesetzt, wird das Asset in eine Dateieinbindung umgewandelt
    name = Text a-zA-Z0-9_ # Kann verwendet werden, um den Namen eines Assets während der Laufzeit zu ändern, aber achten Sie auf Abhängigkeiten
    overwrite = Integer 0/1 # Wenn auf `1` gesetzt, darf diese Anlage bestehende, identisch benannte Anlagen überschreiben
    abhängigkeiten = CSV # Liste der kommagetrennten Asset-Namen, von denen der aktuelle Asset abhängt; beeinflusst die Ladereihenfolge
    group = Text a-zA-Z0-9_ # Gruppenname, Standard "fluid". Durch die Gruppierung von Assets gelten die für die Gruppe verwendeten Einstellungen für Assets
    debug = Integer 0/1 # Wenn `1` die Debug-Ausgabe für jedes Asset aktiviert, wird die Debug-Ausgabe aktiviert
    standalone = Ganzzahl 0/1 # Wenn `1` VHS anweist, diesen Asset als Standalone zu verarbeiten, ohne ihn vom Zusammenführen auszuschließen
    async = Integer 0/1 # Wenn 1, fügt "async"-Attribut zum Skript-Tag hinzu (funktioniert nur, wenn Standalone gesetzt ist und der Typ js ist)
    defer = Ganzzahl 0/1 # Wenn 1, fügt dem Skript-Tag das Attribut "defer" hinzu (funktioniert nur, wenn Standalone gesetzt ist und der Typ js ist)
    movable = Integer 0/1 # If `0` verhindert, dass Assets in den Seitenfuß aufgenommen werden. Wird von Style-artigen Assets verwendet. Standard ist `1`, es sei denn, der Typ ist CSS, was movable=0 erzwingt
    trim = Ganzzahl 0/1 # Wenn `1` das Trimmen von Leerzeichen am Anfang und Ende von Zeilen beim Zusammenführen von Assets ermöglicht
    namedChunks = Integer 0/1 # Wenn `0` verhindert, dass der Asset-Name als Kommentar über dem Asset-Body in zusammengeführten Dateien eingefügt wird
}
plugin.tx_vhs.settings.assetGroup.ASSETGROUPNAME {
    # Dieses Objekt unterstützt nur die folgenden Eigenschaften. Wenn sie auf eine Gruppe angewendet werden, werden die Einstellungen von jeder Gruppe verwendet
    # Asset in dieser Gruppe, es sei denn, es wird direkt in den Attributen des Assets oder durch TypoScript wie oben beschrieben überschrieben.
    # Unterstützte Eigenschaften: Überschreiben, Abhängigkeiten, Gruppe, Debuggen, Standalone, allowMoveToFooter, Trimmen und namedChunks
    # Bitte beachten Sie: Wenn Sie die Eigenschaft "group" ändern, ändert sich der Name der Gruppe, was eine andere Gruppenkonfiguration bedeutet
    # muss hinzugefügt werden, wodurch diese Gruppe konfiguriert wird. Andernfalls können die Einstellungen ignoriert werden.
}
plugin.tx_vhs.settings.asset {
    # dieses Objekt unterstützt jede Eigenschaft, die "assetGroup" unterstützt, mit Ausnahme der Eigenschaften "group" und "dependencies".
}
plugin.tx_vhs.assets {
    mergedAssetsUseHashedFilename = 0 # Wenn auf a 1 gesetzt, werden Assets in eine Datei zusammengeführt, die mit einem Hash if Assets' Namen benannt ist.
    tagsAddSubresourceIntegrity = 0 # Wenn auf 1 (schwächste), 2 oder 3 (stärkste) gesetzt, erzeugt und fügt Vhs die Subresource Integrity (SRI) für jedes eingeschlossene Asset hinzu.
}

Sekundäre Domänennamen für Ressourcen

Sie können VHS so konfigurieren, dass es Pfadvoreinstellungen auf zwei Arten schreibt, von denen eine es Ihnen ermöglicht, eine so genannte "Cookie-freie Domäne" zu erstellen, auf der Anfragen weniger Header enthalten. Normalerweise bewirkt das Setzen von config.absRefPrefix, dass die Pfade Ihrer Ressourcen einer Domäne vorangestellt werden, aber bei diesem Ansatz wird immer ein Domänenname vorangestellt, der nicht "cookiefrei" sein kann. VHS ermöglicht eine alternative Einstellung für das Pfadpräfix, das auf einen sekundären Domänennamen gesetzt werden kann (der auf denselben virtuellen Host zeigt oder nicht), der keine Cookies setzt, wodurch alle Asset-Tags mit diesem Präfix vorangestellt werden:

plugin.tx_vhs.settings.prependPath = http://static.mydomain.com/

Die Einstellung wirkt sich auf jede relative Pfadressource ViewHelper (Anmerkung: Dies beinhaltet keine Links!) in VHS aus, weshalb sie nicht innerhalb des Bereichs "Asset" platziert wird. Wenn Sie diesen Präfixpfad in Vorlagen ausgeben müssen, können Sie das v:page.staticPrefix ViewHelper verwenden - es akzeptiert keine Argumente und gibt die Einstellung nur aus, wenn es gesetzt ist. Beispielsweise wird die Verwendung von f:image dem Bildpfad kein Präfix geben, sondern manuell ein <img />-Tag erstellen und die Verwendung von f:uri.image als src-Argument ermöglicht es Ihnen, den Pfad zu präfixieren.

Benötigen Sie schnelle Hilfe mit dieser Extension? Unser Team von erfahrenen TYPO3-Entwicklern löst Probleme unkompliziert und zum Stundensatz.

Verteilung:VHS ist auf

13.56 % aller TYPO3 installiert.

  • 17.2 % aller TYPO3 9.5.x Installationen installiert
  • 36.96 % aller TYPO3 8.7.x Installationen installiert
  • 29.02 % aller TYPO3 7.6.x Installationen installiert
  • 33.33 % aller TYPO3 7.5.x Installationen installiert
  • 62.5 % aller TYPO3 7.4.x Installationen installiert
  • 14.29 % aller TYPO3 7.3.x Installationen installiert
  • 25 % aller TYPO3 7.2.x Installationen installiert
  • 8.82 % aller TYPO3 7.1.x Installationen installiert
  • 15.08 % aller TYPO3 6.2.x Installationen installiert
  • 8.37 % aller TYPO3 6.1.x Installationen installiert
  • 3.13 % aller TYPO3 6.0.x Installationen installiert
  • 1.82 % aller TYPO3 4.7.x Installationen installiert
  • 0.27 % aller TYPO3 4.6.x Installationen installiert
  • 1.05 % aller TYPO3 4.5.x Installationen installiert
  • 0.71 % aller TYPO3 4.4.x Installationen installiert
  • 1.89 % aller TYPO3 4.3.x Installationen installiert
  • 0.68 % aller TYPO3 4.2.x Installationen installiert
  • 2.34 % aller TYPO3 4.1.x Installationen installiert
  • 0.65 % aller TYPO3 4.0.x Installationen installiert

VHS Version:Verteilung nach installierten Versionen

  • 12.68 % VHS v.5.0.1
  • 0.2 % VHS v.5.0.0
  • 13.56 % VHS v.4.4.0
  • 10.68 % VHS v.4.3.0
  • 6.27 % VHS v.4.2.0
  • 1.12 % VHS v.4.1.0
  • 0.57 % VHS v.4.0.0
  • 14.84 % VHS v.3.1.0
  • 2.49 % VHS v.3.0.1
  • 0.48 % VHS v.3.0.0
  • 16.44 % VHS v.2.4.0
  • 7.55 % VHS v.2.3.3
  • 0.57 % VHS v.2.3.2
  • 0.66 % VHS v.2.3.1
  • 0.18 % VHS v.2.3.0
  • 3.43 % VHS v.2.2.0
  • 0.92 % VHS v.2.1.4
  • 0.62 % VHS v.2.1.3
  • 0.44 % VHS v.2.1.2
  • 0.15 % VHS v.2.0.2
  • 0.62 % VHS v.2.0.0
  • 0.13 % VHS v.1.8.5
  • 4.93 % VHS v.1.8.4
  • 0.46 % VHS v.1.8.3

PHP Version:VHS wird benutzt mit

  • 0.96 % PHP/7.2
  • 11.97 % PHP/7.1
  • 20.32 % PHP/7.0
  • 32.39 % PHP/5.6
  • 21.65 % PHP/5.5
  • 5.48 % PHP/5.4
  • 5.8 % PHP/5.3
  • 1.49 % PHP/5.2
  • 0.16 % PHP/4.4
  • 0.05 % PHP/4.3

responsive - image 4

Gosign-Responsive Index: TYPO3 Installationen nutzen VHS zu

  • 37 % wenn der Gosign-Responsive-Index zwischen 80 % und 100 % ist
  • 31 % wenn der Gosign-Responsive-Index zwischen 60 % und 80 % ist
  • 20 % wenn der Gosign-Responsive-Index zwischen 40 % und 60 % ist
  • 12 % wenn der Gosign-Responsive-Index zwischen 20 % und 40 % ist
  • 0 % wenn der Gosign-Responsive-Index zwischen 0 % und 20 % ist

speed test - image 5

Pagespeed: TYPO3 Installationen nutzen VHS zu

  • 19 % wenn der Pagespeed zwischen 80 % und 100 % ist
  • 34 % wenn der Pagespeed zwischen 60 % und 80 % ist
  • 25 % wenn der Pagespeed zwischen 40 % und 60 % ist
  • 12 % wenn der Pagespeed zwischen 20 % und 40 % ist
  • 14 % wenn der Pagespeed zwischen 0 % und 20 % ist


Stichprobe n=36801 von Gosign gecrawlte TYPO3-Seiten mit den Top-Level-Domains <.de>

Ran an die Resultate – unser Newsletter für Sie!

Damit Sie gleich Wind davon bekommen, wenn wir in unserem Magazin zu neuen Erkenntnissen kommen.