Introduction to Code Splitting

Code Splitting Pages: Why and When

Standard Page Loading in Vue

Implementing Code Splitting for Pages

Demonstrating Lazy Loading of Pages

Code Splitting Components Conditionally

Component Loading Before Code Splitting

Demonstrating Eager Loading of Components

Implementing Lazy Loading for Components with defineAsyncComponent

Configuring defineAsyncComponent

Demonstrating Lazy Loading of Components

Recap: Pages and Components Lazy Loading

Advanced Options for defineAsyncComponent

Loading and Error Components

Delay and Timeout Options

Code Splitting in Vanilla Vue App Summary

Code Splitting in Nuxt Applications

Nuxt Pages Code Split by Default

Nuxt Components Lazy Loading with 'lazy' prefix

Demonstrating Nuxt Lazy Component Loading

Best Practices: When NOT to Lazy Load

Performance Issues with Nested Lazy Loading (Waterfall Effect)

Trade-offs of Code Splitting

Next Lesson: Pre-fetching Lazy Loaded Chunks