Lazy loading routes
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.
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
AskPagecomponent inAskPage.tsx:export const AskPage = () => <Page title="Ask a question" />; export default AskPage;
- Open
App.tsxand remove the currentimportstatement for theAskPagecomponent. - Add an
importstatement for React:import React from 'react';
- Add a new
importstatement for theAskPage...