一、什么是懒加载

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

二、为什么需要懒加载

在单页应用中,如果没有使用懒加载,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. 【python爬虫】用requests库模拟登陆人人网

    说明:以前是selenium登陆取cookie的方法比较复杂,改用这个 """ 用requests库模拟登陆人人网 """ import r ...

  2. Mysql_笔记2018.1.29

    1.主要数据库 Oracle MySQL Sqlsever 微软 MongoDB (非关系型数据库) 2.MySql 专业词语 1.数据库:一些关联表的集合 2.数据表:表示数据的矩阵 3.列:同ex ...

  3. 去年去阿里面试,被问到java 多线程,我是这样手撕面试官的

    1.多线程的基本概念 1.1进程与线程 程序:是为完成特定任务,用某种语言编写的一组指令的集合,即一段静态代码,静态对象. 进程:是程序的一次执行过程,或是正在运行的一个程序,是一个动态的过程,每个程 ...

  4. ABBYY FineReader中的其他格式

    ABBYY FineReade是一款功能强大的PDF编辑转换器,在内置任务窗口,您可以将 PDF 或图片转换成常见的格式(*.pptx. *.odt. *.html.*.epub.*.fb2.*.rt ...

  5. 学习django笔记一:在urls.py中导入sign应用views文件的问题

    >python-admin startproject guest     #创建guest项目 >python3 manage.py startapp sign  #在guest项目中创建 ...

  6. 我给 Apache 顶级项目提了个 Bug

    这篇文章记录了给 Apache 顶级项目 - 分库分表中间件 ShardingSphere 提交 Bug 的历程. 说实话,这是一次比较曲折的 Bug 跟踪之旅.10月28日,我们在 GitHub 上 ...

  7. yii2.0验证码的两种实现方式

    第一种方式:采用model 1. 模型:Code.php <?phpnamespace app\models; use yii\base\Model;class Code extends Mod ...

  8. Linux中redis服务开启docker运行redis并设置密码

    //查询目前可用的reids镜像 docker search redis //选择拉取官网的镜像 docker pull redis //查看本地是否有redis镜像 docker images // ...

  9. NameServer 与zk

    1.nameServer 之间互不通信,故不存在强一致性,即不同的producer看到的视图可能时不一样的,(如何保证最终一致的?) 2.nameServer维护的boker信息 发生变化时,不会像z ...

  10. 【VSA】One-shot video-based person re-identification with variance subsampling algorithm

    目录 解决了什么问题 主要贡献和创新点 基本框架 提出的方法 01 variance confidence方差置信度 02 Variance Subsampling Algorithm 方差二次采样算 ...