Detailed steps for implementing lazy route loading in Vue

How to implement lazy loading of routes in Vue?

Performance optimization is particularly important in modern front-end development. To improve user experience and reduce initial loading time, many developers choose to use Route Lazy Loading to load pages on demand. Today, we will explore how to implement lazy loading in routing and illustrate it with sample code.

What is laziness loading for routing?

Lazy loading of routes refers to the mechanism in which the route-related components are loaded when the user actually accesses a specific route. This method can significantly reduce the JavaScript file size during initial loading, thereby increasing the loading speed of the application.

Why do you need lazy loading of routes?

• Improve loading speed: The components are loaded only when needed, avoiding unnecessary waste of resources.
• Improve user experience: Users can see the initial content faster, rather than waiting for the large JavaScript file to load.
• Reduce bandwidth usage: Reduce user downloads, especially on mobile devices.

How to implement lazy loading of routing?

In , you can implement lazy loading of routing through Dynamic Import. This is a feature introduced by ES6 that allows you to load modules only when needed.

Step 1: Create a Vue project

If you don't have a Vue project yet, use the Vue CLI to create a new project:

vue create my-vue-app
cd my-vue-app

Step 2: Install Vue Router

If you do not select Vue Router when creating the project, you can install it with the following command:

npm install vue-router

Step 3: Set the route to lazy loading

existsrc/router/In the file, you can use dynamic import to define routes. Here is a simple example:

import Vue from 'vue';
import Router from 'vue-router';

(Router);

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import(/* webpackChunkName: "home" */ '../views/'), // Lazy loading  },
  {
    path: '/about',
    name: 'About',
    component: () => import(/* webpackChunkName: "about" */ '../views/'), // Lazy loading  },
  {
    path: '/contact',
    name: 'Contact',
    component: () => import(/* webpackChunkName: "contact" */ '../views/'), // Lazy loading  },
];

const router = new Router({
  mode: 'history',
  routes,
});

export default router;

Analysis:

• Dynamic import:passimport()Methods implement lazy loading. The relevant components will be loaded only when the user accesses the corresponding route.
• webpackChunkName: This comment is used to split components of different routes into different files for better control over code splitting.

Step 4: Create a view component

Next, you need to create those view components that we reference in the route. You cansrc/viewsCreated in folder、and。

Example:

<template>
  <div>
    <h1>Home Page</h1>
    <p>Welcome to the Home Page!</p>
  </div>
</template>

<script>
export default {
  name: 'Home',
};
</script>

<style>
/* Home Page Style */
</style>

Example:

<template>
  <div>
    <h1>About Page</h1>
    <p>This is the About Page.</p>
  </div>
</template>

<script>
export default {
  name: 'About',
};
</script>

<style>
/* About page style */
</style>

Example:

<template>
  <div>
    <h1>Contact Page</h1>
    <p>This is the Contact Page.</p>
  </div>
</template>

<script>
export default {
  name: 'Contact',
};
</script>

<style>
/* Contact page style */
</style>

Step 5: Use routing in your application

existsrc/, you need to set<router-view>, so as to display different components according to different routes. As shown below:

<template>
  <div >
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-link to="/contact">Contact</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
};
</script>

<style>
/* App page style */
</style>

Finish!

Now, when you run the app and navigate to a different route, you can observe that the component will load only when accessing the corresponding route. This lazy loading method not only improves loading efficiency, but also improves the overall user experience.

in conclusion

Through the above steps, we successfully implemented lazy loading of routing in Vue. This trick is especially critical when building large applications and can help you manage load effectively and improve performance. As the application scale increases, the importance of lazy loading will become more and more obvious.

This is the end of this article about the detailed steps of Vue to implement lazy loading. For more related content on lazy loading of Vue routes, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!