Solution: Optimizing Production Bundle

Here’s the solution for how to optimize the production bundle by using lazy-loading routes.

We'll cover the following

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.

Get hands-on with 1200+ tech skills courses.