Ladezeiten optimieren mit Webpack
Im Vergleich zu Shopware 5, das noch Grunt im Einsatz hat, um CSS und Javascript zu kompilieren, setzt Shopware 6 auf moderne Technologien und zwar auf den Module Builder Webpack. Mithilfe von zahlreichen Webpack Plugins lassen sich beispielsweise SCSS zu CSS Dateien umwandeln bzw. komprimieren oder Entrypoints realisieren. Hiermit stellt man dem Client nur den Javascript-Code zur Verfügung stellt, der momentan benötigt wird. Diese Maßnahmen reduzieren natürlich Downloadgröße, Komplexität und Ladezeiten erheblich. Weitere Informationen zu Webpack und eine umfassende Dokumentation findet man auf der offiziellen Webpack Seite.
Optimierter Entwicklungsworkflow
Webpack kann grundsätzlich beliebig flexibel eingesetzt werden und wird in Shopware 6 mittels Konfigurationsdateien. Die Datei „base“ beinhaltet die allgemeine Konfiguration, „prod“ und „dev“ jeweils die entsprechenden Einstellungen für das Live-System bzw. das Entwicklungssystem. Am interessantesten (vor allem für Entwickler und Templater) ist der modus „hot“. Mit dieser Einstellung wird der mitgelieferte Webpack HMR Modus (Hot Module Replacement) eingesetzt. Damit erspart man sich als Entwickler jede Menge Zeit, da die Javascript & SCSS-Dateien bei einer Änderung nicht jedes Mal mühsam neu kompiliert werden müssen. Mit Hot Reloading wird das geänderte Modul in der laufenden Seite ersetzt, ohne den Shop neu laden zu müssen. Ändert sich ein Modul, wird das Modul selbst und alle davon abhängigen Komponenten neu geladen und das Ganze zur Laufzeit. Für Entwickler ist das eine geniale Verbesserung für eine effiziente Arbeitsweise.
Shopware 6 Webpack Konfiguration
In Shopware 6 ist „hot-reload“ grundsätzlich schon vorkonfiguriert und man braucht nur ein paar Eingriffe um es in einer lokalen Entwicklungsumgebung (wie z.B. Docker) einzusetzen. In der base template Datei „base.html.twig“ kann man die Vorbereitung deutlich erkennen.
Die benötigen Docker-Ports müssen eingerichtet und weitergereicht werden. D.h. die Docker-Ports 9000, 9998 und 9999 werden auf die jeweiligen localhost-Ports „publiziert“ (3276, 9998, 9999).
– „9000:3276“
– „9998:9998“
– „9999:9999“
Mit dem Befehl docker exec -ti container bash geht man in den „app“ container und führt im „shop-root“ die Befehle aus, um die Administration und Storefront zu bauen.
Achtung: die Administration muss zuerst gebaut werden, weil die Storefront Abhängigkeiten zur Administration hat.
php psh.phar administration:build
php psh.phar storefront:build
(storefront:dev) => für development verwenden
php psh.phar storefront:hot-proxy
Danach kann man über den Port 9998 die Seite im Browser aufrufen und man ist einfach glücklich :-)
