Vue->如何实现路由懒加载

为何要使用路由懒加载

在SPA但也应用开发过程当中，由于只有一个inde.html的关系，咱们第一次进入页面就会在在一个vue的模块app.js，而这个app.js里面挂在这咱们所编写的每一个页面/组件/模块，若是是这样的话进入项目就会加载全部的资源，假设咱们的项目有几十兆的资源，你以为首次加载会不会白屏/卡顿/死机，那还用说吗？
所以对SPA但也应用首屏渲染作出的性能优化方案是:路由懒加载

如何实现路由懒加载

路由配置文件中，在没有使用路由懒加载以前，咱们的代码是这样的

//导入模块
import recommend from 'views/recommend'

// 路由对象
{
    path: '/',
    name: 'recommend',
    component: recommend
},
复制代码

使用箭头函数实现路由懒加载

// 推荐

{
    path: '/recommend',
    name: 'recommend',
    meta: {title: '推荐',index: 1},
    component: () => import('views/recommend')
},
复制代码

说明

• 资源懒加载，被访问时才会被加载对应的js模块，而不是第一次加载全部资源
• 提升整个项目的加载性能
• 少写一些import导入模块的代码，哈哈哈

写在最后

但愿个人分享对你有所帮助，更多资讯请持续关注，我会分享愈来愈多的实战经验哦！ 或加入大前端知识体系社区一块儿探索技术:608229520