Eine Webseite, Drei Frameworks — Part Angular / JAMstack
Das Repo: https://gitlab.com/palmomedia/version-angular
Bevor ich loslege, wollen wir erstmal klarstellen, dass uns sehr wohl bewusst ist, dass wir hier Angular als Framework mit React und Vue als Bibliotheken vergleichen. Warum? Weil wir es können!
Alle Drei Webseiten nutzen jetzt jQuery und Bootstrap 4.4, sowie die “AOS — Animate on scroll library” und fortawesome. Und alle verhalten sich ziemlich ähnlich. Die Performance ist in der Standardinstallation gering. Was okay ist, denn die Frameworks sind weniger für “leichtgewichtige” Webseiten gemacht als viel mehr für komplexe Singe-Page-Anwendungen mit vielen Interaktionen und Background-Operationen.
https://angular.palmomedia.de/
https://reactjs.palmomedia.de/
Angular
Nachdem wir den Produktion-Mode aktiviert haben (das müssen wir bei Vue und React noch nachholen) kommt die Webseite beim PageSpeed Insights auch über die 17 Punkte hinaus ;) Sogar recht beeindruckend. Das dist Verzeichnis hat eine Gesamtgröße von 1,5 MB und umfasst 13 Dateien und den assets Ordner. Zur Erinnerung, wir vergleichen hier immer den Mobile Index, der Desktop Index kommt bei Angular auf sagenhafte 98 Punkte.
https://gitlab.com/palmomedia/version-vuejs
React
Wir durchlaufen den Vergleich in umgekehrter Reihung. React war als zweites dran. Die Performance beim PageSpeed lag von vornherein bei 76 Zählern. Jetzt mit -p schauen wir ob wir das Ergebnis schlagen können. Desktop Score: 97. Wir haben insgesamt eine build Verzeichnisgröße von 4 MB mit 12 Dateien sowie dem static Ordner mit den CSS und JS Dateien für die index.html.
https://gitlab.com/palmomedia/version-reactjs
Vue
Mit Vue haben wir angefangen und mit Vue enden wir den Vergleich. Das Kompilat war am enttäuschendsten — also bevor wir die Angular Version im Rohmodus mal gegen Google geworfen haben. Auch mit — mode production behält Vue Platz 1 der Verzeichnisgröße, das dist Verzeichnis enthält 6,2 MB Daten bei 10 Dateien und den zwei Subfolders css und js. Der Desktop Score beträgt: 88. Vue verliert also auf ganzer Linie. Wahrscheinlich zu unrecht. Wahrscheinlich ist es mit Webpack möglich noch einiges zu verschlanken. Aber in diesem Vergleich wurden die Frameworks gegeneinander gehalten, so wie die Community sie schuf.
https://gitlab.com/palmomedia/version-vuejs
Und das ist das Ergebnis.
Nichtsdestotrotz darf man sich ein subjektives persönliches Urteil über die Drei Kontrahenten erlauben. Am meisten Spaß hat Vue gemacht. Und Codemäßig ist dies auch das Projekt das am leichtesten daher kommt. Schaut euch die Repos an!
