vue-cli按需加载,懒加载组件
vue来做一个单页面应用,当我们的项目越来越大,组件越来越多的时候,首次启动项目户特别慢,就算做一个加载框,蒙层之类的,体验也不会好,这个时候就需要按需加载
1.什么叫按需加载
所谓按需加载,顾名思义,就是当我需要的时候再给我,我不要的时候,你就老老实实待着
2.如何懒加载
2.1路由的按需加载
用起来很简单,原来定义路由component:‘Home’
按需加载的写法就是:resolve => require(['@/components/home/home'],resolve)
2.2组件的按需加载
上图是我们,正常加载组件的方法
这里是按需加载,组件写法,同按需加载路由差不多
vue-cli按需加载,懒加载组件的更多相关文章
- vue学习指南:第十二篇(详细) - Vue的 路由 第二篇 ( 路由按需加载(懒加载))
各位朋友 因 最近工作繁忙,小编停更了一段时间,快过年了,小编祝愿 大家 事业有成 学业有成 快乐健康 2020开心过好每一天.从今天开始 我会抽时间把 Vue 的知识点补充完整,以及后期会带给大家更 ...
- vue路由的异步加载(懒加载)方法
vue路由的异步加载(懒加载)方法. javascriptvue.jsvue-router 阅读约 2 分钟 vue本身不多介绍.直接说问题,因为vue的所有路由都是加载在一个app.js里的,如果 ...
- 《前端之路》之 前端图片 类型 & 优化 & 预加载 & 懒加载 & 骨架屏
目录 09: 前端图片 类型 & 优化 & 预加载 & 懒加载 & 骨架屏 09: 前端图片 类型 & 优化 & 预加载 & 懒加载 & ...
- vue项目性能优化(路由懒加载、gzip加速、cdn加速)
前端工程性能优化一说意义深远悠长,本章主要介绍除了一些基础优化外如何实行路由懒加载.Gzip加速.CDN加速,让网页飞的快一些. 基础优化 老生常谈的一些: 不要在模板中写复杂的表达式 慎用watch ...
- VUE项目性能优化实践——通过懒加载提升页面响应速度
本文由葡萄城技术团队原创并首发 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 最近我司因业务需求,需要在一个内部数据分析平台集成在线Excel功能,既然我 ...
- Vue 组件异步加载(懒加载)
一.vue的编译模式 (1)路由配置信息 //eg1: const MSite = resolve => require.ensure([], () =>resolve(require([ ...
- 「Vue.js」Vue-Router + Webpack 路由懒加载实现
一.前言 当打包构建应用时,Javascript 包会变得非常大,影响页面加载.如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了.结合 Vue ...
- Vue常规后台系统,路由懒加载实现基于菜单数据并解耦
路由依赖菜单 场景:文件名与路由组件名完全一致(随便大小写均可) 菜单使用一套,路由又存在一套,这样就很不舒服,于是做了如下处理: 尝试不用懒加载发现有难度,使用懒加载就很轻松了 data.js ex ...
- vue 打包体积过大 实现懒加载 ????
import Vue from ‘vue’ import Router from 'vue-router' //把路由对应的组件定义成异步组纪检 const hello = resolve => ...
- vue Cli 按需引入Element UI 和全局引用Element UI
全局引用: 一.安装 Element UI npm i element-ui -S 二.在main.js 中引入 element UI import ElementUI from 'element-u ...
随机推荐
- 4.1 socket
socket 背景概念 脑图结构 OSI 模型 socket 概念特性 脑图结构 理解示意图 额外补充 Socket是应用层与 TCP/IP协议族通信的中间软件抽象层,它是一组接口. 在设计模式中 ...
- Disconf 分布式配置管理平台(安装配置)
Disconf 分布式配置管理平台(安装配置) 依赖环境 Nginx:处理静态资源请求.动态请求转发到Tomcat Tomcat:处理Nginx的请求 Redis:用户session管理 MySQL: ...
- Java【第九篇】异常处理
异常概述 介绍 任何一种程序设计语言设计的程序在运行时都有可能出现错误,例如除数为0,数组下标越界,要读写的文件不存在等等.捕获错误最理想的是在编译期间,但有的错误只有在运行时才会发生.对于这些错误, ...
- BIOS翻译
BIOS翻译 BIOS(Basic Input/Output System—基本输入输出系统).BIOS可以视为是一个永久地记录在ROM中的一个软件 Main主要信息 :main 主要信息 advan ...
- 老男孩Python全栈学习 S9 日常作业 007
1.把列表中所有姓周的人的信息删掉 lst = ['周老二', '周星星', '麻花藤', '周扒皮'] lst = ['周老二', '周星星', '麻花藤', '周扒皮'] lst2 = [] fo ...
- 老男孩Python全栈学习 S9 日常作业 001
1.简述变量命名规范 必须以字母.数字.下划线命名,且不能以数字开头 不能是python的关键字 不能以中文或者拼音作为变量名 命名格式推荐以驼峰式或者下划线连接命名 区分大小写 要有意义,具有可描述 ...
- SQL Server数据库的备份和还
转:http://blog.csdn.net/zwj7612356/article/details/8188025 在sql server数据库中,备份和还原都只能在服务器上进行,备份的数据文件在服务 ...
- 第十二节:MVC中的一些特殊优化
一. 删除WebForm视图引擎 在MVC框架中检索视图的顺序为:当前控制器下对应的文件夹的aspx文件→share文件夹aspx文件→当前控制器下对应文件夹的cshtml文件→share文件夹的cs ...
- django - 总结 - ORM性能
QuerySet 1.惰性查询 2.缓存机制 3.可迭代 4.可切片 -------------------------------------------------------在一个新创建的查询集 ...
- react-router(v4) 路由跳转后返回页面顶部问题
遇到的问题 由A页面跳转到B页面,B页面停留在A页面的位置,没有返回到顶部. 问题分析 首先分析下出现此问题的原因: 在项目中使用的是 hashHistory,它是建立在 history 之上的,当路 ...