2.3 Lazy Loading Routes (Vite Only) ।। Vue Router 4 Fundamentals - #09

Published: 05 June 2023
on channel: JS School

257

In this lesson, we use dynamic imports to lazy load different javascript chunks per page. This practice keeps the application lightweight and fast, as code is only requested from the server when it is needed.

==
If you're using Vue CLI and don't want to see how lazy loading works with Vite, you can skip this lesson (not suggested). Skip to next lesson on Lazy Loading with Vue CLI.
==

▬ VueJS Router 4 - Playlist ▬▬▬▬▬▬▬▬▬
✔️ Introduction to Vue Router 4
➖ 1.1 Introduction to Vue Router 4 ▬    • 1.1 Introduction to Vue Router 4 ।। I...
➖ 1.2 Creating the Project with Vite (Vite Only) ▬    • 1.2 Creating the Project with Vite (V...
➖ 1.3 The Scaffolded Codebase (Vite Only) ▬    • 1.3 The Scaffolded Codebase (Vite Onl...
➖ 1.4 Installing and Setting Up Vue Router (Vite Only) ▬    • 1.4 Installing and Setting Up Vue Rou...
➖ 1.5 Creating the Project with Vue CLI (Vue CLI Only) ▬    • 1.5 Creating the Project with Vue CLI...
➖ 1.6 The Scaffolded Codebase (Vue CLI Only) ▬    • 1.6 The Scaffolded Codebase (Vue CLI ...

✔️ Vue Router 4 Fundamentals
➖ 2.1 Adding Routes and Content ▬    • 2.1 Adding Routes and Content ।। Vue ...
➖ 2.2 History Mode: HTML5 vs Hash ▬    • 2.2 History Mode: HTML5 vs Hash ।। Vu...
➖ 2.3 Lazy Loading Routes (Vite Only) ▬    • 2.3 Lazy Loading Routes (Vite Only) ।...
➖ 2.4 Lazy Loading Routes (Vue CLI Only) ▬    • 2.4 Lazy Loading Routes (Vue CLI Only...
➖ 2.5 Navigation Component ▬    • 2.5 Navigation Component ।। Vue Route...
➖ 2.6 Router Link Active Class ▬    • 2.6 Router Link Active Class ।। Vue R...
➖ 2.7 Dynamic Routes ▬    • 2.7 Dynamic Routes ।। Vue Router 4 Fu...
➖ 2.8 Named Routes ▬    • 2.8  Named Routes ।। Vue Router 4 Fun...
➖ 2.9 Clean Up ▬    • 2.9 Clean Up ।। Vue Router 4 Fundamen...
➖ 2.10 Reacting to Param Changes ▬    • 2.10 Reacting to Param Changes ।। Vue...
➖ 2.11 Route Props ▬    • 2.11 Route Props ।। Vue Router 4 Fund...
➖ 2.12 Experience Cards ▬    • 2.12 Experience Cards ।। Vue Router 4...
➖ 2.13 Nested Routes ▬    • 2.13 Nested Routes ।। Vue Router 4 Fu...

✔️ Vue Router Embellishments
➖ 3.1 Go Back ▬    • 3.1 Go Back  ।। Vue Router Embellishm...
➖ 3.2 Route Transitions ▬    • 3.2 Route Transitions ।। Vue Router E...
➖ 3.3 404 Not Found Page ▬    • 3.3 404 Not Found Page ।। Vue Router ...
➖ 3.4 Route Guards ▬    • 3.4 Route Guards ।। Vue Router Embell...
➖ 3.5 Scroll Behavior ▬    • 3.5 Scroll Behavior ।। Vue Router Emb...

✔️ Advanced Vue Router 4
➖ 4.1 Route Meta Fields ▬    • 4.1 Route Meta Fields ।। Advanced Vue...
➖ 4.2 Router Query Params ▬    • 4.2 Router Query Params ।। Advanced V...
➖ 4.3 Extending Router Link for External URLs ▬    • 4.3 Extending Router Link for Externa...
➖ 4.4 Router and the Composition API ▬    • 4.4 Router and the Composition API ।।...

✔️ Vue Router 4 Bonus Chapter
➖ 5.1 Bonus Lessons ▬    • 5.1 Bonus Lessons ।। Vue Router 4 Bon...
➖ 5.2 Programmatic Navigation ▬    • 5.2 Programmatic Navigation ।। Vue Ro...
➖ 5.3 Named Views ▬    • 5.3 Named Views ।। Vue Router 4 Bonus...
➖ 5.4 Redirect and Alias ▬    • 5.4 Redirect and Alias ।। Vue Router ...
➖ 5.5 Detecting Navigation Failures ▬    • 5.5 Detecting Navigation Failures ।। ...
➖ 5.6 Advanced Routes’ Matching Syntax ▬    • 5.6 Advanced Routes’ Matching Syntax ...
➖ 5.7 Dynamic Routing ▬    • 5.7 Dynamic Routing ।। Vue Router 4 B...
▬▬ ▬▬ ▬▬ ▬▬ ▬▬ ▬▬ ▬▬ ▬▬ ▬▬ ▬▬