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

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.