Vue实现路由懒加载

Vue路由懒加载

---

使用懒加载的原因

1、如果项目比较大,在npm run build打包后, 生成的app.js(项目业务)文件会很大,用户在请求时,可能会造成短暂的页面空白,影响使用体验.
2、使用懒加载后, 打包会形成多个业务.js文件,当用户路由到哪个页面时,就请求哪个页面,不用一下子把所有的业务代码请过来,从而减少请求时间,提升用户的使用感受.

如何实现懒加载

1、普通页面路由注册:

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

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

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

或者写成

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

• 这样在经过打包之后,有几个懒加载的路由,打包后的dist文件夹里,就会有几个业务的js文件,这样在,用户点击相对应的路由跳转之后,才会去请求,这样减少用户的等待时间,提升用户的使用体验.