vue中页面卡顿,使用懒加载
为给客户更好的客户体验,首屏组件加载速度更快一些,解决白屏问题。
懒加载简单来说就是延迟加载或按需加载,即在需要的时候的时候进行加载。
常用的懒加载方式有两种:即使用vue异步组件 和 ES中的import
1.未使用懒加载和使用异步组件懒加载
方法:component: resolve=>(require(['地址']), resolve)
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld' Vue.use(Router) export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component:HelloWorld
}
]
})
import Vue from 'vue'
import Router from 'vue-router'
/* 此处省去之前导入的HelloWorld模块 */
Vue.use(Router) export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: resolve=>(require(["@/components/HelloWorld"],resolve))
}
]
})
2.ES提出的import方法(最常用)
方法:const HelloWorld = ()=>import('地址')
import Vue from 'vue'
import Router from 'vue-router' Vue.use(Router) const HelloWorld = ()=>import("@/components/HelloWorld")
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component:HelloWorld
}
]
})
示例:
原写法
<template>
<div class="hello">
<One-com></One-com>
1111
</div>
</template> <script>
import One from './one'
export default {
components:{
"One-com":One
},
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
const写法
<template>
<div class="hello">
<One-com></One-com>
1111
</div>
</template> <script>
const One = ()=>import("./one");
export default {
components:{
"One-com":One
},
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
异步写法
<template>
<div class="hello">
<One-com></One-com>
1111
</div>
</template> <script>
export default {
components:{
"One-com":resolve=>(['./one'],resolve)
},
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
总结:
路由和组件的常用两种懒加载方式
1.vue异步组件实现路由懒加载
component: resolve=>(['地址'], resolve)
2.es提出的import(推荐使用)
const HelloWorld = () => import('地址')
参考自:https://www.cnblogs.com/xiaoxiaoxun/p/11001884.html
vue中页面卡顿,使用懒加载的更多相关文章
- VUE项目性能优化实践——通过懒加载提升页面响应速度
本文由葡萄城技术团队原创并首发 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 最近我司因业务需求,需要在一个内部数据分析平台集成在线Excel功能,既然我 ...
- vue(组件、路由)懒加载
const Login = resolve => require(['@/components/Login'], resolve) //就不用import了 Vue.use(Router) le ...
- 在Vue中的load或ready的加载时机
在Vue中的load或ready的加载时机 1.我们来插入一段代码来分析: Js代码如下 <script type="text/javascript"> var app ...
- vue项目性能优化(路由懒加载、gzip加速、cdn加速)
前端工程性能优化一说意义深远悠长,本章主要介绍除了一些基础优化外如何实行路由懒加载.Gzip加速.CDN加速,让网页飞的快一些. 基础优化 老生常谈的一些: 不要在模板中写复杂的表达式 慎用watch ...
- 「Vue.js」Vue-Router + Webpack 路由懒加载实现
一.前言 当打包构建应用时,Javascript 包会变得非常大,影响页面加载.如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了.结合 Vue ...
- Vue常规后台系统,路由懒加载实现基于菜单数据并解耦
路由依赖菜单 场景:文件名与路由组件名完全一致(随便大小写均可) 菜单使用一套,路由又存在一套,这样就很不舒服,于是做了如下处理: 尝试不用懒加载发现有难度,使用懒加载就很轻松了 data.js ex ...
- 在web.xml中添加配置解决hibernate 懒加载异常
在web.xml添加如下,注意:在配置在struts2的拦截器之前,只能解决请求时出现的懒加载异常:如果没有请求,还需要lazy属性的添加(比如过滤器) <!-- 配置Spring的用于解决懒加 ...
- 在vue中使用Echarts画曲线图(异步加载数据)
现实的工作中, 数据不可能写死的,所有的数据都应该通过发送请求进行获取. 所以本项目的需求是请求服务器获得二维数组,并生成曲线图.曲线图的横纵坐标均从获得的数据中取得. Echarts官方文档: ht ...
- 用apicloud+vue的VueLazyload实现缓存图片懒加载
<script src="../../script/vue-lazyload.js"></script><img v-lazy="remot ...
随机推荐
- c# Dictionary的使用
创建: Dictionary<string, OverCaseData> dataDic = new Dictionary<string, OverCaseData>() ...
- Selenium多窗口切换代码
# #!/usr/bin/python3 # -*- coding: utf-8 -*- # @Time : 2020/7/31 16:05 # @Author : Gengwu # @FileNam ...
- MySQL中EXPLAIN命令详细解析
很多情况下我们需要知道某条SQL语句的性能,都会通过EXPLAIN命令来查看查询优化器是如何执行的. 如何使用 使用EXPLAIN很简单,只需要在执行的SQL前面加上EXPLAIN即可 explain ...
- 【BZOJ1426】收集邮票 题解 (期望)
题目:有n种不同的邮票,皮皮想收集所有种类的邮票.唯一的收集方法是到同学凡凡那里购买,每次只能买一张,并且买到的邮票究竟是n种邮票中的哪一种是等概率的,概率均为1/n.但是由于凡凡也很喜欢邮票,所以皮 ...
- JavaScript小游戏实例:简单的键盘练习
键盘是一种常用的输入设备,灵活熟练地使用键盘进行输入是计算机用户需掌握的一门基本功.下面我们编写一个简单的键盘练习游戏. 1.刺破气泡交互式小动画 在编写简单的键盘练习游戏之前,先设计一个简单地刺破气 ...
- SSH安全免密码登录:ssh key
ssh key 使用非对称加密方式生成公钥和私钥 私钥存放在本地~/.ssh目录 公钥可以对外公开,放在服务器的~/.ssh/authorized_keys 1.linux平台生成ssh key ss ...
- RF,SVM和NN的优缺点
1. 随机森林优缺点 随机森林(RF)是Bagging的一个扩展变体.RF在以决策树为基分类器进行集成的基础上,进一步在决策树的训练过程中引入了随机属性选择. Bagging就是对数据集训练多个基分类 ...
- Oracle 存储过程 批量插入测试数据
有时候需要做DB的效率测试时,需要模拟大量数据.可以根据一条原始数据,通过执行存储过程拷贝出大量数据: CREATE OR REPLACE PROCEDURE proc_msw_strsql IS i ...
- C#LeetCode刷题之#700-二叉搜索树中的搜索(Search in a Binary Search Tree)
问题 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/4102 访问. 给定二叉搜索树(BST)的根节点和一个值. 你需要 ...
- itest(爱测试) 开源一站式敏捷测试管理平台&极简项目管理,重大升级(接口测试)6.0.0 发布
itest 简介 itest 开源敏捷测试管理,testOps 践行者,极简的任务管理,测试管理,缺陷管理,测试环境管理,接口测试5合1,又有丰富的统计分析.可按测试包分配测试用例执行,也可建测试迭代 ...