一、什么是懒加载

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

二、为什么需要懒加载

在单页应用中,如果没有使用懒加载,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. 这 12 款 IDEA 插件你用过几款?

    搞 Java开发用什么软件,当然是神器idea了,那么,idea的插件对于你来说就是必不可少的了,不仅可以提高自己的编码效率,还可以减轻工作时的枯燥烦闷.接下来就来说说,我平时敲代码用的什么插件吧. ...

  2. js常用函数和事件

    1.常规函数 javascript常规函数包括以下9个函数: (1)alert函数:显示一个警告对话框,包括一个OK按钮. (2)confirm函数:显示一个确认对话框,包括OK.Cancel按钮. ...

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

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

  4. Redis安全学习

    Redis安全学习 一直在听SSRF打Redis,那Redis到底是啥,正式的认真学习一下. 1.Redis是什么 REmote DIctionary Server(Redis) 是一个由Salvat ...

  5. wordpress 博客环境安装

    WordPress是使用PHP语言开发的博客平台,用户可以在支持PHP和MySQL数据库的服务器上架设属于自己的网站.也可以把 WordPress当作一个内容管理系统(CMS)来使用. 1.数据库环境 ...

  6. bootstrap-datetimepicker的两种版本

    1.引入js/css <link rel="stylesheet" th:href="@{/plugin/bootstrap-datetimepicker/boot ...

  7. CorelDRAW X7 X8 2017 2018是什么关系?

    从CorelDRAW 2017版本开始我们叫习惯了的X几系列的CorelDRAW毅然决然的就换了称呼,所以有时候很多朋友对于软件版本,经常会傻傻分不清,还有人认为X8版本比2017版本高,究竟为什么会 ...

  8. 《Spring Boot 实战纪实》之如何攥写需求文档

    目录 前言 (思维篇)人人都是产品经理 1.需求文档 1.1 需求管理 1.2 如何攥写需求文档 1.3 需求关键点文档 2 原型设计 2.1 缺失的逻辑 2.2 让想法跃然纸上 3 开发设计文档 3 ...

  9. Linux初学学习笔记 -----正则表达式和通配符

    简单来说通配符是用来匹配文件名和目录而正则表达式是用来匹配文本内容的 常用的通配符 *:匹配任意多个字符 下面的是以p为开头的目录里面的文件 ?:匹配任意一个字符 [-]:匹配括号内出现的任意一个字符 ...

  10. Golang自学系列

    为什么会有这个系列? 因为我要往架构方向靠拢啊. 关于架构,其实架构的书我看了<架构整洁之道>,也有<实现驱动领域设计>.但是我感觉明显还不够,所以我在极客时间买了一个架构相关 ...