vue2 Note Implementation of Lazy Loading of vue router Routing

In Web applications, the bottleneck of the system often lies in the response speed of the system. If the response speed of the system is too slow, users will complain and the value of the system will be greatly reduced. Therefore, it is very important to improve the response speed of the system.

Lazy loading (Load On Demand) is a unique and powerful data acquisition method, which can automatically obtain more data when users scroll pages, while the newly obtained data will not affect the display of the original data, and at the same time minimize the resource consumption on the server side.

When writing a single page application with vue. js, the packaged JavaScript package is very large, which affects the page loading. We can use the lazy loading of routes to optimize this problem. When we use a certain route, we will load the corresponding components, which will be more efficient. The implementation code is as follows:

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

Vue.use(Router)

export default new Router({
 routes: [
  {
   path: '/',
   component: resolve => require(['components/Hello.vue'], resolve)
  },
  {
    path: '/about',
    component: resolve => require(['components/About.vue'], resolve)
  }
 ]
})