Introduction

Learn why we need to do performance optimization for our application and how we can achieve it by splitting the routes of the application.

We'll cover the following

Lazy loading routes and components
Splitting application by routes

Lazy loading routes and components

When users visit our web application, they only need the code responsible for rendering components for the route being visited. They don’t need our whole application immediately. Very large applications can weigh quite a lot, and every additional kilobyte means more information is sent to the user and then parsed and processed by a browser.

Thus, instead of sending a whole application immediately, we can lazy loadLazy loading delays the loading of website components until after the page has been displayed. certain parts of the application while providing only the code that the user needs. To do that, we can use dynamic imports. If we scaffolded the app with Vue CLI, then the dynamic imports feature is offered by the Webpack bundler that’s used internally. Since ES2020, modern browsers have also supported this feature natively. Now, let’s have a look at how we can optimize our application and improve its load time.

Get hands-on with 1200+ tech skills courses.

Before We Begin

Migrating from Vue 2 to Vue 3

Project Configuration and Useful Extensions

Scalable Project Architecture

Project and Component Documentation

API Layer and Managing Async Operations

Advanced Component Patterns

Managing Application State

Managing Application Layouts

Performance Optimization

Vuex Patterns and Best Practices

Application Security

Best Practices for Testing Vue Applications

Useful Patterns, Tips and Tricks

Conclusion

Appendix

Introduction

Lazy loading routes and components