Seite 14 - Vue.js

Vue Transitionen sind mächtig, aber voller versteckter Fallen. Ein falsch gesetztes CSS-Property löst Layout Reflow aus und macht die Animation ruckelig. Ein fehlender key-Wechsel lässt Elemente verschwinden, ohne dass Transition überhaupt ausgelöst wird. Dieser Artikel erklärt, wie Vue Transitionen tatsächlich funktionieren, welche CSS-Properties smooth laufen und welche Muster in der Praxis zuverlässig schöne Animationen liefern.

Eine Vue-Anwendung, die mit 50 Einträgen flüssig läuft, kann mit 5.000 Einträgen zum Erliegen kommen. Virtualisierung, Memoisierung und gezieltes Profiling sind die drei Hebel, mit denen große Listen performant bleiben – messbar, nicht gefühlt.

Ein einzelnes riesiges JavaScript Bundle bremst jede Vue App beim ersten Laden aus. Bundle Splitting mit dynamic import, manualChunks und Route basiertem Code Splitting verteilt den Code auf kleinere Häppchen, die der Browser parallel und bedarfsgerecht lädt.