The official explanation for lazy loading of routes is:

JavaScript packages can become very large when packaged to build applications, affecting page loads. It would be much more efficient if we could split the components corresponding to different routes into different code blocks and then load the components only when the routes are accessed.

Actually means that we each routing corresponding is a show user page, but according to the normal operating these pages may end webpack packaged as a bundle of js file, which caused the page is very huge, where the request may take some time, bad to cause the user experience. So we can solve this problem by routing lazy loading. This means that different routing pages are packaged into different JS files, which eliminates the server’s time consuming problem.

When we did not use lazy loading, the packaged Vue project would generate three files, one is all the business code of the APP, one is the code of the organization and management module relationship, and one is the code of the third party introduced by the project.

Then let’s look at the way lazy loading is implemented: there are three ways to combine asynchronous components, AMD way, es6 modular way

In ES6, we can write a much simpler way to organize code splitting between Vue asynchronous components and Webpack. So we did it the simplest way:

 component: () = > import('.. /components/about.vue') 
Copy the code

Example:

 routes: [
    {
      path: '/'.redirect: '/home'
    },
    {
      path: '/hello'.component: () = >import('.. /components/HelloWorld.vue')}, {path: '/home'.component: () = > import('.. /components/home.vue')}, {path: '/about'.component: () = > import('.. /components/about.vue')}, {path: '/person/:userid'.component: () = > import('.. /components/person.vue')},Copy the code

The final result of this packaging:

We found that each routing interface was packaged with a JS file, so that we could load on demand, reducing the strain on the server