Solution: Optimizing Production Bundle

Solution

Your task was to add per-route and component lazy-loading. Here are the changes required:

For the src/router/index.js file:

• Replace static imports for the Home and About components with dynamic imports, such as const Home = () => import(‘@/views/Home.vue’).

For the src/views/Home.vue file:

• Import the defineAsyncComponent method and use it to lazy load the Modal component.

Let’s run the widget below to understand how the solution above works.

Note: The code below may take a while to run. When the server starts, go to the app URL, and see the output.