一、什么是懒加载

顾名思义,懒加载就是随用随加载,什么时候需要就什么时候加载。

二、为什么需要懒加载

在单页应用中,如果没有使用懒加载,webpack打包后的文件会很大,这时进入首页时的加载时间会很长,不利于良好的用户体验,而运用懒加载则可以将页面进行划分,需要的时候加载页面,可以有效的分担首页所承担的加载压力,减少首页加载所用的时间。

三、路由中懒加载机制的体现

const OldPhone = resolve => require(["@/pages/mine/OldPhoneEnsure"], resolve);

  export default new Router({

    routes: [
        { 

path: "/oldphone",
                              name: "oldphone",
                              component: OldPhone,
                              meta: {
                                          title: "确认手机号",
                                          keepAlive: false,
                                          requireAuth: true
                                       }

        },
    ]
})

vue2实现路由懒加载的更多相关文章

  1. vue2.x 路由懒加载 优化打包体积

    当打包构建应用时,Javascript 包会变得非常大,影响页面加载.如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了. 结合 Vue 的异步组 ...

  2. vue3 + vite实现异步组件和路由懒加载

    在 Vue2 中,异步组件和路由懒加载处理使用 import 就可以很轻松实现.但是在Vue 3.x 中异步组件的使用与 Vue 2.x 完全不同了.本文就详细讲讲vue3中异步组件和路由懒加载的实现 ...

  3. vue-cli 项目实现路由懒加载

    在vue 单页应用中,如果路由不实现懒加载,那么打包出来的文件将会非常大,加载也会非常慢.vue-router 官网也有相应的介绍,但是具体怎么去实现还是讲的比较模糊的,下面将一步步讲解配置路由懒加载 ...

  4. vue-router路由懒加载(解决vue项目首次加载慢)

    懒加载:----------------------------------------------------? 也叫延迟加载,即在需要的时候进行加载,随用随载. 为什么需要懒加载? 像vue这种单 ...

  5. vue的路由懒加载

    路由懒加载官方介绍 非懒加载写法: import Login from '@/components/Login' 所有路由涉及到的文件会被打包到 app.xxx.js 中 懒加载写法: const L ...

  6. 【巷子】---vue路由懒加载---【vue】

    一.懒加载 也叫延迟加载或者按需加载,即在需要的时候进行加载,   二.为什么要使用懒加载 像vue这种单页面应用,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要 ...

  7. vue项目性能优化(路由懒加载、gzip加速、cdn加速)

    前端工程性能优化一说意义深远悠长,本章主要介绍除了一些基础优化外如何实行路由懒加载.Gzip加速.CDN加速,让网页飞的快一些. 基础优化 老生常谈的一些: 不要在模板中写复杂的表达式 慎用watch ...

  8. vue-router路由懒加载

    正常配置 import Vue from 'vue' import Router from 'vue-router' import Login from '@/components/pages/log ...

  9. vue+element ui项目总结点(一)select、Cascader级联选择器、encodeURI、decodeURI转码解码、mockjs用法、路由懒加载三种方式

    不多说上代码: <template> <div class="hello"> <h1>{{ msg }}</h1> <p> ...

随机推荐

  1. rbd的数据在哪里

    创建一个rbd [root@mytest ~]# rbd create test1 --size 4000 查看rbd信息 [root@mytest ~]# rbd info test1 rbd im ...

  2. 让面试官心服口服:Thread.sleep、synchronized、LockSupport.park的线程阻塞有何区别?

    前言 在日常编码的过程中,我们经常会使用Thread.sleep.LockSupport.park()主动阻塞线程,或者使用synchronized和Object.wait来阻塞线程保证并发安全.此时 ...

  3. 分布式监控系统之Zabbix网络发现

    前文我们了解了zabbix的宏,自定义item和模板的相关话题,回顾请参考https://www.cnblogs.com/qiuhom-1874/p/14013331.html:今天我们来了解下zab ...

  4. msfconsle核心命令学习

    back 取消当前模块 banner check 检查当前exploit是否对目标有效,并不进行真正的攻击 color 禁用或启用输出是否包含颜色 connect 可以通过connect命令来链接Ne ...

  5. 新鲜出炉!阿里Java后端面经,已拿offer!

    前面给大家分享了一篇字节跳动拿下offer的面经,很多小伙伴都私信我说收获很大,感兴趣的朋友可以回头去看看.很多小伙伴还问我有没有其他大厂的面试题分享,这不他来啦,阿里2020春招面试题给大家整理在下 ...

  6. 全网最全!这份深入讲解jdk和jvm原理的笔记,刷新了我对JVM的认知

    前言 前两天和朋友探讨技术的时候有聊到JVM和JDK这一块,聊到这里两个人就像高山流水遇知音那是根本停不下来,事后我想着趁现在印象还比较深刻就把这些东西整理起来分享给大家来帮助更多的人吧.话不多说,满 ...

  7. go-zero 如何扛住流量冲击(二)

    本篇文章承接上一篇go-zero 如何扛住流量冲击(一). 上一篇介绍的是 go-zero 中滑动窗口限流,本篇介绍另外一个 tokenlimit ,令牌桶限流. 使用 const ( burst = ...

  8. FLstudio 系列教程(七):FL Studio五大常用按钮介绍

    我们打开FL Studio编曲软件会发现界面中有好多的菜单和窗口,这些窗口每个都有其单独的功能.今天小编主要给大家详细讲解下FL Studio水果软件的五大常用按钮. 1.首先我,我们双击桌面的水果图 ...

  9. guitar pro系列教程(三):Guitar Pro7乐谱页面显示模式设置

    大家好,又到了guitar pro系列教程的时间 本章节我们采用图文结合的方式为大家讲解一下guitar pro 7乐谱的页面显示设置,有兴趣的小伙伴都可以进来看看哦.首让我们先看下图: 如上图所示, ...

  10. FL studio系列教程(三):如何用FL Studio做电音

    电音制作,自然少不了适合做电音的软件,市面上可以进行电音制作的软件不少,可是如果在这些软件中只能选择一款的话,想必多数人会把票投给FL Studio,毕竟高效率是永远不变的真理,今天就让我们来看看如何 ...