一、什么是懒加载

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

二、为什么需要懒加载

在单页应用中,如果没有使用懒加载,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. 一篇文章了解_docker

    (一)Docker介绍 2018年10月6日 星期六 15:04 什么就Docker? Docker是一个开源项目, 诞生于2013年初,最初是dotCloud公司内部的一个业余项目.它基于Googl ...

  2. 看看吧!月薪20K以上的程序员才能全部掌握RabbitMq知识,你掌握了多少

    一.RabbitMq基础知识 0.概述 消息队列的作用就是接收消息生产者的消息,然后将消息发送到消费者 1.信道channel 我的理解是生产者/消费者和rabbitmq交互的一个通道,负责交换机.队 ...

  3. 深度解析:如何替换掉代码中的ifelse,我女朋友看完都会了!

    平时我们在写代码时,需要针对不同情况处理不同的业务逻辑,用得最多的就是if和else. 但是如果情况太多,就会出现一大堆的"if else",这就是为什么很多遗留系统中,一个函数可 ...

  4. 使用Camtasia制作游戏直播高能短视频

    随着电竞行业的兴起,很多主播都开始做起游戏直播.对于喜欢打游戏的朋友来说,观看游戏直播既可以提高游戏的技术,也能作为下班后的休闲娱乐.对于喜欢钻研游戏技术的朋友,制作一个游戏高能合集能也是一件很燃的事 ...

  5. Guitar Pro怎么导出乐谱

    使用Guitar Pro可以自由创作乐谱,也能根据演示效果来作出相应调整,算得上是公认的良心吉他谱制作软件.除了系统演示功能外,Guitar Pro还能给用户的实际练习提供便利.必要时,用户能将软件内 ...

  6. guitar pro 系列教程(六):Guitar Pro音频导出功能之RSE音源

    让我们继续进行guitar pro的教程 上一章节,我们讲解了guitar Pro的播放与显示功能,在Guita pro的音源选择中分为两类,一种是自带的RES高保真音源,一种是MIDI输入音源.如果 ...

  7. 【CF607B】Zuma——区间dp(记忆化搜索/递推)

    以下是从中文翻译成人话的题面: 给定一个长度小于等于500的序列,每个数字代表一个颜色,每次可以消掉一个回文串,问最多消几次可以消完? (7.16) 这个题从洛谷pend回来以后显示有103个测试点( ...

  8. JVM类加载机制详解,建议看这一篇就够了,深入浅出总结的十分详细!

    类加载机制 虚拟机把描述类的数据从Class文件加载到内存,并对数据进行校验.转换解析和初始化,最终形成可以被虚拟机直接使用的Java类型,这就是虚拟机的类加载机制. 类加载的时机 遇到new(比如n ...

  9. Arcgis基于高程(DEM)计算地形湿度指数(TWI),以及坡度(Slope)度单位转换为弧度

    以30m*30m分辨率的图层为例 一.基于表面工具箱Surface计算Slope 1.如下图输入图层DEM,输出Slope 2.单位转换: Scale_slope=Slope*pi/180 二.基于水 ...

  10. How tomcat works(深入剖析tomcat)(7) Logger

    How tomcat works (7)日志记录器 总体概述 顾名思义,这一章将的是tomcat的日志记录器组件,比较简单,tomcat提供了几种类型不同的日志记录器,但是所有的日志记录器都需要实现L ...