vue懒加载

更新日期: 2019-10-23阅读: 2.2k标签: 懒加载

一、 什么是懒加载

懒加载也叫延迟加载,即在需要的时候进行加载,随用随载。


二、为什么需要懒加载

在单页应用中,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多,延时过长,不利于用户体验,而运用懒加载则可以将页面进行划分,需要的时候加载页面,可以有效的分担首页所承担的加载压力,减少首页加载用时


1、路由懒加载:

export default new Router({
	routes: [{
		path: '/my',
		name: 'my',
		//懒加载
		component: resolve => require(['../page/my/my.vue'], resolve),
	}, ]
})


2、组件懒加载:

方式一:

const Routers = [
  {
    path: '/',  // 路径
    component: resolve => require(['../components/member/index], resolve)  // 异步加载组件
  },
  {
    path: '/login',
    component: resolve => require(['../components/member/login'], resolve)
  }
]

方式二:

// 组件名字与按需引入方式
const Home = () => import(/* webpackChunkName: "home" */ '@/components/page/home/home-index').then(m => m.default)
const Login = () => import(/* webpackChunkName: "login" */ '@/components/page/login/login').then(m => m.default)


3、全局懒加载:

Vue.component('mideaHeader', () => {
    System.import('./component/header/header.vue')
})


链接: https://www.fly63.com/article/detial/6566

监听滚动条,实现数据懒加载

当滚动条滚动到底部时,加载新数据;需要根据距离底部的位置加载数据,考虑到新数据进来会使滚动条距离底部的位置有所改变,避免重复加载数据

v-lazy图片懒加载

安装插件npm install vue-lazyload --save;在main.js文件中注册插件。配置参数:preLoad提前加载高度(数字 1 表示 1 屏的高度)、error图片加载失败时显示的图片

解决el-tree lazy懒加载时,连续勾选前两个子节点后第二次进入默认选中时,将父节点也勾选的问题

在用到el-tree的懒加载和默认勾选功能时,若第一次勾选前几个连续节点,第二次进入默认勾选时,由于el-tree子节点尚未完全加载(只加载出来前几个),默认勾选已经开始

实现一个Vue自定义指令懒加载

当我们向下滚动的时候图片资源才被请求到,这也就是我们本次要实现的效果,进入页面的时候,只请求可视区域的图片资源这也就是懒加载。比如我们加载一个页面,这个页面很长很长,长到我们的浏览器可视区域装不下

前端性能优化之图片懒加载

在类电商类项目,往往存在大量的图片,如 banner 广告图,菜单导航图,美团等商家列表头图等。图片众多以及图片体积过大往往会影响页面加载速度,造成不良的用户体验,所以进行图片懒加载优化势在必行。

过度使用懒加载对 Web 性能的影响

如今为了提升应用性能,懒加载被广泛使用于 Web 应用中。它帮助开发者减少网站加载时间,节省流量以及提升用户体验。但懒加载的过度使用会给应用性能带来负面影响

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!