ALLES ÜBER assetloader UND WIE ES AUF WEBSITES EINGESETZT WIRD
Untersuchte Extension
assetloader
TYPO3 Erweiterung assetloader
Mit dieser Erweiterung können Sie Ihrem Projekt komfortabel Inline CSS und JS, Deferred CSS und JS und Webfonts hinzufügen.
Das Ziel dieser Erweiterung ist es, die allgemeine Seitengeschwindigkeit zu verbessern, indem man die Art und Weise, wie diese Assets geladen werden, verbessert.
Merkmale
- Die Erweiterung wird vollständig über Typoscript konfiguriert
- Ermöglicht die Einbindung von Inline-CSS und JS sowohl in
<head> als auchvor </body>. - Ermöglicht das Einbinden von CSS- und JS-Dateien, jedoch mit verzögertem Laden
- Ermöglicht die Einbindung von Google-Schriften und benutzerdefinierten Schriften über den Webfontloader
- Alle enthaltenen Assets können verkleinert und verkettet werden
Verwendung
Installation
Installation mit Composer
Es wird empfohlen, diese Erweiterung über composer zu installieren.
Um es zu installieren, benötigen Sie einfach composer sethorax/typo3-assetsloader
Diese Erweiterung kann auch traditionell über das TYPO3 Extension Repository (TER) installiert werden.
TypoScript-Einrichtung
Jeder Aspekt dieser Erweiterung ist über das Typoscript-Setup konfigurierbar.
Beispiel für die Einrichtung von Typoskripten:
plugin.tx_assetsloader {
concatenateCSS = 1
concatenateJS = 1
minifyCSS = 1
minifyJS = 1
includeCSSInline {
kritisch = Körper {Hintergrundfarbe: schwarz; Mindestgröße: 100vh;}
}
includeCSSInlineFooter {
styles = EXT:my_page_extension/Resources/Public/styles/styles/styles.css
styles.file = 1
}
includeJSInline {
app = fileadmin/app.js
app.file = 1
}
includeJSInlineFooter {
script = console.log('Hello World!');
}
includeCSSDeferred {
deferred = fileadmin/style.css
deferred2 = fileadmin/style2.css
deferred3 = fileadmin/style2.css
deferred3.excludeFromConcatenation = 1
}
includeJSDeferred {
app = fileadmin/app.js
}
fontloader {
googleFonts {
roboto = Roboto:400,500,500,500i
opensans = Open Sans:400
}
customFonts {
familien {
fa = FontAwesome (Fantastisch)
}
urls {
fa = https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css
}
}
}
}Alle Einstellungen werden im plugin.tx_assetsloader konfiguriert
Typoskript-Einstellungen
concatenateCSS
Wenn aktiviert, werden alle CSS-Dateien verknüpft. Die Verkettung wird nur von includeCSSDeferred und includeJSDeferred unterstützt.
Einzelne Dateien können von der Verkettung ausgeschlossen werden, indem in den Dateieinstellungen excludeFromConcatenation = 1 gesetzt wird.
concatenateJS
Wie concatenateCSS, aber für JS.
minifyCSS
Wenn aktiviert, wird der gesamte CSS-Code verkleinert. Die Verkleinerung wird von allen CSS- und JS-bezogenen Einstellungen unterstützt.
minifyJS
Wie minifyCSS, aber für JS.
includeCSSInline
Alle Einträge innerhalb dieser Einstellung werden als Style-Tag in den <head> aufgenommen.
Es kann auch Dateiinhalte als Inline-CSS beinhalten. Setzen Sie dazu die Datei = 1 für diesen Eintrag.
Unterstützt die Verkleinerung.
includeCSSInlineFußzeile
Wie includeCSSInline, aber mit dem Style-Tag vor </body>.
includeJSInline
Alle Einträge innerhalb dieser Einstellung werden als Skript-Tag in den <head> aufgenommen.
Es kann auch Dateiinhalte als Inline-JS beinhalten. Setzen Sie dazu die Datei = 1 für diesen Eintrag.
Unterstützt die Verkleinerung.
includeJSInlineFooter
Wie includeJSInline, aber mit dem Skript-Tag vor </body>.
includeCSSDeferred
Alle Einträge innerhalb dieser Einstellung werden über ein kleines Inline-Ladeskript verzögert geladen.
Das Standardladeskript kann in settings.deferredCssLoadingScript überschrieben werden.
Akzeptiert nur Dateien.
Unterstützt Minifizierung und Verkettung.
Einzelne Dateien können von der Verkettung ausgeschlossen werden, indem in den Dateieinstellungen excludeFromConcatenation = 1 gesetzt wird.
beinhaltenJSDabgeleitet
Alle Einträge innerhalb dieser Einstellung werden als Skript-Tag mit dem Attribut async und defer aufgenommen.
Akzeptiert nur Dateien.
Unterstützt Minifizierung und Verkettung.
Einzelne Dateien können von der Verkettung ausgeschlossen werden, indem in den Dateieinstellungen excludeFromConcatenation = 1 gesetzt wird.
fontloader.googleFonts
Alle Google-Schriftfamilien innerhalb dieser Einstellung werden mit dem Webfontloader geladen.
Der Inhalt einer Schriftfamilie muss die Zeichenkette der Schriftfamilie von Google Fonts! sein
fontloader.customFonts
Ermöglicht es Ihnen, benutzerdefinierte Schriftfamilien mit dem Webfontloader zu laden.
fontloader.customFonts.families
Fügen Sie hier die Namen der Schriftfamilie hinzu.
fontloader.customFonts.urls
Die URLs zur Schriftfamilie.
Standardeinstellungen überschreiben
Alle Standardeinstellungen werden in den Einstellungen festgelegt
settings.deferredCssLoadingScript laden
Diese Einstellung enthält das Ladeskript, um das Laden von CSS-Dateien zu verschieben.
Dieses Skript muss zwei Marker enthalten, die später ersetzt werden:
| Marker | Beschreibung |
|---|---|
| ####CSSFILE######### | Dieser Marker wird durch den vollständigen Pfad der css-Datei ersetzt. |
| ####SCRIPTNAME####### | Dieser Marker wird durch einen generierten Hash ersetzt, um eine einzigartige Ladefunktion zu erstellen. |
settings.WFLLoadingScript laden
Diese Einstellung enthält das Ladeskript zum Laden des Webfontloaders.
Benötigen Sie schnelle Hilfe mit dieser Extension? Unser Team von erfahrenen TYPO3-Entwicklern löst Probleme unkompliziert und zum Stundensatz.
