Vue routing lazy loading details

1. What is lazy loading of routes?

Official explanation:

• When bundling your app, the JavaScript bundle can become very large, impacting page load.
• It would be more efficient if we could split the components corresponding to different routes into different code blocks, and then load the corresponding components when the route is accessed.
  

What the official meant

• First of all, we know that there are usually many different pages defined in the route
• Where will this page be packaged in the end? Generally, it will be placed in a js file
• But with so many pages, putting all the files in one js file will inevitably make the page very large.
• If we request this page from the server all at once, it may take some time, and there may even be a brief blank on the user's computer.
• How to avoid this? Use lazy loading of routes
  

What does lazy loading of routes do?

The main function of lazy loading of routes is to package the components corresponding to the routes into js code blocks, and only load the corresponding components when the route is accessed.

2. Use of lazy loading of routes

Before using it, let's take a look at how the original code loads the route

import Vue from "vue";
import VueRouter from "vue-router";
import Home from "@/views/Home";
import About from "@/views/About";
import User from "@/views/User";

Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    name: "Home",
    component: Home,
  },
  {
    path: "/about",
    name: "About",
    component: About
  },
  {
    path: "/user/:userId",
    name: "User",
    component: User
  }
];

We can see that we have imported the components corresponding to the route from the beginning. If there are many components that need to be imported, the loading page will be relatively slow. Let's take a look at the files packaged in this way.

We can see that there are only two js files packaged in this way. When we load the page later, we need to load all the two files before the page will be displayed. If the amount of code is too much, the page response will be slow, which will give a very bad user experience.

Next we use lazy loading of routes

import Vue from "vue";
import VueRouter from "vue-router";

Vue.use(VueRouter);

// Add new route lazy loading code const Home = () => import('../views/Home')
const About = () => import('../views/About')
const User = () => import('../views/User')

const routes = [
  {
    path: "/",
    name: "Home",
    component: Home,
  },
  {
    path: "/about",
    name: "About",
    component: About
  },
  {
    path: "/user/:userId",
    name: "User",
    component: User
  }
];

We can see that nothing needs to be changed in the routing configuration. Just use it as usual. Just declare a variable before that and use the arrow function in the variable to import the corresponding component. It is very simple to use.

The file structure packaged using lazy loading of routes is as follows:

We can see that there are 3 more js files than the original method. This is because the 3 components in our code above use route lazy loading. These 3 js files will only be loaded when the route is accessed, which can save a lot of loading time.

Therefore, we recommend using lazy loading to load routes.

This is the end of this article about the details of vue routing lazy loading. For more related vue routing lazy loading content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!