vue来做一个单页面应用，当我们的项目越来越大，组件越来越多的时候，首次启动项目户特别慢，就算做一个加载框，蒙层之类的，体验也不会好，这个时候就需要按需加载

1.什么叫按需加载

所谓按需加载，顾名思义，就是当我需要的时候再给我，我不要的时候，你就老老实实待着

2.如何懒加载

2.1路由的按需加载

用起来很简单，原来定义路由component:‘Home’

按需加载的写法就是：resolve => require(['@/components/home/home'],resolve)

2.2组件的按需加载

上图是我们，正常加载组件的方法

这里是按需加载，组件写法，同按需加载路由差不多

vue-cli按需加载，懒加载组件的更多相关文章

  1. vue学习指南：第十二篇(详细) - Vue的 路由 第二篇 ( 路由按需加载(懒加载))

    各位朋友 因 最近工作繁忙,小编停更了一段时间,快过年了,小编祝愿 大家 事业有成 学业有成 快乐健康 2020开心过好每一天.从今天开始 我会抽时间把 Vue 的知识点补充完整,以及后期会带给大家更 ...

  2. vue路由的异步加载(懒加载)方法

    vue路由的异步加载(懒加载)方法. javascriptvue.jsvue-router  阅读约 2 分钟 vue本身不多介绍.直接说问题,因为vue的所有路由都是加载在一个app.js里的,如果 ...

  3. 《前端之路》之 前端图片 类型 & 优化 & 预加载 & 懒加载 & 骨架屏

    目录 09: 前端图片 类型 & 优化 & 预加载 & 懒加载 & 骨架屏 09: 前端图片 类型 & 优化 & 预加载 & 懒加载 & ...

  4. vue项目性能优化（路由懒加载、gzip加速、cdn加速）

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

  5. VUE项目性能优化实践——通过懒加载提升页面响应速度

    本文由葡萄城技术团队原创并首发 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 最近我司因业务需求,需要在一个内部数据分析平台集成在线Excel功能,既然我 ...

  6. Vue 组件异步加载(懒加载)

    一.vue的编译模式 (1)路由配置信息 //eg1: const MSite = resolve => require.ensure([], () =>resolve(require([ ...

  7. 「Vue.js」Vue-Router + Webpack 路由懒加载实现

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

  8. Vue常规后台系统，路由懒加载实现基于菜单数据并解耦

    路由依赖菜单 场景:文件名与路由组件名完全一致(随便大小写均可) 菜单使用一套,路由又存在一套,这样就很不舒服,于是做了如下处理: 尝试不用懒加载发现有难度,使用懒加载就很轻松了 data.js ex ...

  9. vue 打包体积过大 实现懒加载 ？？？？

    import Vue from ‘vue’ import Router from 'vue-router' //把路由对应的组件定义成异步组纪检 const hello = resolve => ...

  10. vue Cli 按需引入Element UI 和全局引用Element UI

    全局引用: 一.安装 Element UI npm i element-ui -S 二.在main.js 中引入 element UI import ElementUI from 'element-u ...

随机推荐

  1. di.xml

    di.xml文件 该di.xml文件配置对象管理器要注入的依赖项. 领域和应用入口点 每个 模块 都可以具有全局和区域特定的di.xml文件.Magento读取di.xml系统中声明的所有配置文件,并 ...

  2. 【bfs】麻将游戏

    题目 来自:yinzm的blog 在一种"麻将"游戏中,游戏是在一个有W*H格子的矩形平板上进行的.每个格子可以放置一个麻将牌,也可以不放(如图所示).玩家的目标是将平板上的所有可 ...

  3. Vue, React, AngularJS, Angular2 我们对流行JavaScript框架们的选择

    转自<奇舞周刊>,好文章mark一下 分割线 一个有趣的事实是:IBM发表的2017年最值得学习的编程语言名单中,JavaScript榜上有名.这位IT巨头指出,JS在网站中惊人地达到94 ...

  4. 关于try catch finally 三者之间的关系（JDK 1.8）

    话不多说 线上代码 package System; import java.util.Scanner; /** * * @author chris * */ public class TryCathf ...

  5. MySQL_列值为null对索引的影响_实践

    一.首先看一个我在某公众号看到的一个关于数据库优化的举措 二.如果where子句中查询的列执行了 “is null” 或者 “is not null” 或者 “<=> null” 会不会使 ...

  6. Object is not a function

    如图报了一个这样的错,百度好多都说是函数名和html元素重名的问题.可是这个问题我想我这里是不存在的 可以看到就一个绑定事件,而且id名不是关键字 报错是在$.ajax这一行,索性就把submit-i ...

  7. 第十三节：HttpHander扩展及应用(自定义扩展名、图片防盗链)

    一. 自定义扩展名 1. 前言 凡是实现了IHttpHandler接口的类均为Handler类,HttpHandler是一个HTTP请求的真正处理中心,在HttpHandler容器中,ASP.NET ...

  8. John von Neumann和Ulam

    John von Neumann和Ulam是好朋友,两人经常在一起喝酒.旅行.谈女人.有一次诺伊曼认出身边的一位女士,他们交谈了几句.随后他给Ulam介绍那是他的一位老朋友,刚刚离婚.Ulam就问:那 ...

  9. [物理学与PDEs]第5章习题4 广义 Hookean 定律的张量的对称性

    设材料是超弹性的, 并设参考构形为自然状态, 证明由线性化得到的张量 ${\bf A}=(a_{ijkl})=\sex{2\cfrac{\p \bar p_{ij}}{c_{kl}}}$ 具有以下的对 ...

  10. 运维工作笔记-------nginx的反向代理

    1.nginx的反向代理意义 一般来说,我们在项目中,不会直接让项目服务器ip与外网做直接映射,这样一则是不安全,二是客户直接去访问项目服务器,对项目服务器带来的压力太大,从而导致项目运行速度变慢,程 ...