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
andAbout
components with dynamic imports, such asconst Home = () => import(‘@/views/Home.vue’)
.
For the src/views/Home.vue
file:
- Import the
defineAsyncComponent
method and use it to lazy load theModal
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 1400+ tech skills courses.