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. 在Django中使用ORM创建图书管理系统

    一.ORM(对象关系映射) 很多语言的web框架中都有这个概念 1. 为什么要有ORM? 1. 写程序离不开数据,要使用数据就需要连接数据库,但是不同的数据库在sql语句上(mysql,oracle等 ...

  2. 【坦克大战】Unity3D多人在线游戏(泰课的坦克大战--旋转的螺丝钉)

    [坦克大战]Unity3D多人在线游戏 http://www.taikr.com/my/course/937 1.NetworkManager的介绍: 说明:选择固定生成时会自动寻找有StartPos ...

  3. SpringBoot之普通类获取Spring容器中的bean

    package com.geostar.geostack.git_branch_manager.common; import org.springframework.beans.BeansExcept ...

  4. BZOJ 3456: 城市规划 与 多项式求逆算法介绍(多项式求逆, dp)

    题面 求有 \(n\) 个点的无向有标号连通图个数 . \((1 \le n \le 1.3 * 10^5)\) 题解 首先考虑 dp ... 直接算可行的方案数 , 容易算重复 . 我们用总方案数减 ...

  5. pgsql事务与并发控制

    事务与并发控制 事务的基本的概念和性质 ACID: 原子性:一个事务要么全部执行,要么全部不执行 一致性:执行事务的时候,数据库从一个一致的状态变更到另一个状态 隔离性: 确保在并发执行的时候,每个事 ...

  6. python之OpenCv(三)---基本绘图

    opencv 提供了绘制直线.圆形.矩形等基本绘图的功能 1.绘直线 cv2.line(画布,起点坐标,终点坐标,颜色,宽度) 例如: cv2.line(image,(20,60),(300,400) ...

  7. Vue(小案例_vue+axios仿手机app)_购物车

    一.前言 1.购物车 二.主要内容 1.效果演示如下,当我们选择商品数量改变的时候,也要让购物车里面的数据改变 2.具体实现 (1)小球从上面跳到下面的效果 (2)当点击上面的“加入购物车按钮”让小球 ...

  8. Ansible安装部署以及常用模块详解

    一.  Ansible 介绍Ansible是一个配置管理系统configuration management system, python 语言是运维人员必须会的语言, ansible 是一个基于py ...

  9. 【asp.net】asp.net遍历Request的信息

    #需求: 在服务端获取从客户端发送过来的所有数据信息: #方案: 1.服务端代码 public void ProcessRequest(HttpContext context) { //打印所有参数信 ...

  10. 第四节: EF调用存储过程的通用写法和DBFirst模式子类调用的特有写法

    一. 背景 上一个章节,介绍了EF调用两类SQL语句,主要是借助 ExecuteSqlCommand  和 SqlQuery 两个方法来完成,在本章节主要是复习几类存储过程的写法和对应的EF调用这几类 ...