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文件,这样在,用户点击相对应的路由跳转之后,才会去请求,这样减少用户的等待时间,提升用户的使用体验.