Vue implements routing lazy loading

Vue routing lazy loading

---

Reasons to use lazy loading

1. If the project is relatively large, after npm run buildpackaging, the generated app.js (project business) file will be large. When the user requests it, it may cause a short page blank and affect the user experience.
2. After using lazy loading, package Multiple business .js files will be formed. When the user is routed to which page, which page is requested, there is no need to request all the business codes at once, thereby reducing the request time and improving the user experience.

How to implement lazy loading

1. Ordinary page routing registration:

import Login form '../components/page/Login.vue'
 {
    
    
 	path: '/login',
   	component: Login
  },

2、实现懒加载注册方式:

 {
    
    
	path: '/login',
	component: () => import('../components/page/Login.vue'),
 },

Or written as

const Login = () => import('../components/page/Login.vue')
 {
    
    
	path: '/login',
	component: Login
 },

• In this way, after packaging, there are several lazy-loaded routes. In the packaged dist folder, there will be several business js files, so that after the user clicks the corresponding route jump, the request will be made. This reduces the user's waiting time and improves the user's experience.