Lazy Loading Routes

Learn about the lazy loading routes in JavaScript.

We'll cover the following

Implementing lazy loading in the ask page
- Test yourself

At the moment, all the JavaScript for our app is loaded when the app first loads. This is fine for small apps, but for large apps, this can have a negative impact on performance. There may be large pages that are rarely used in the app that we want to load the JavaScript for on demand. This process is called lazy loading.

Implementing lazy loading in the ask page

We are going to lazy load the ask page in this section. It isn’t a great use of lazy loading because this is likely to be a popular page in our app, but it will help us learn how to implement this. Let’s carry out the following steps:

First, we are going to add a default export to the AskPage component in AskPage.tsx:

Get hands-on with 1200+ tech skills courses.

Introduction

Getting Started

Creating Decoupled React and ASP.NET 5 Apps

Building a Frontend with React and TypeScript

Styling React Components with Emotion

Routing with React Router

Working with Forms

Managing State with Redux

Interacting with the Database with Dapper

Creating REST API Endpoints

Improving Performance and Scalability

Securing the Backend

Interacting with RESTful APIs

Adding Automated Tests

Configuring and Deploying to Azure

Implementing CI and CD with Azure DevOps

Conclusion

Lazy Loading Routes

Implementing lazy loading in the ask page