TYPO3 Plugin:

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 auch vor </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.