vue懒加载

2019-07-18  本文已影响0人  lyp82nkl

什么是懒加载?

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

为什么需要懒加载?

像vue这种单页面应用,如果没有使用到懒加载,webpack打包的文件过大,造成进入首页时,加载的资源过多,时间过长,即使做了loading也不利于用户体验,而运用懒加载可以将页面进行划分,需要的时候加载页面,可以有效的分担首页所承担的加载压力,减少首页加载事件,简单来说就是进入首页不用一次加载过多资源造成时间过长。

图片懒加载

安装

npm i vue-lazyload -S

使用方法

// main.js:
import Vue from 'vue'
import App from './App.vue'
import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload)

//  自定义参数选项配置
Vue.use(VueLazyload, {
  preLoad: 1.3, // 提前加载高度(数字 1 表示 1 屏的高度) 默认值:1.3
  error: 'dist/error.png', // 当加载图片失败的时候
  loading: 'dist/loading.gif', // 图片加载状态下显示的图片
  attempt: 1 //  加载错误后最大尝试次数 默认值:1
})

new Vue({
  el: 'body',
  components: {
    App
  }
})

template:

<!-- 使用方法1: 可能图片url是直接从后台拿到的,把':src'替换成'v-lazy'就行 --> 
<template>
  <ul>
    <li v-for="img in list">
      <img v-lazy="img.src" >
    </li>
  </ul>
</template>

<!-- 使用方法2: 使用懒加载容器v-lazy-container,和v-lazy差不多,通过自定义指令去定义的,不过v-lazy-container扫描的是内部的子元素 --> 
<template>
  <div v-lazy-container="{ selector: 'img'}">
    <img data-src="//domain.com/img1.jpg">
    <img data-src="//domain.com/img2.jpg">
    <img data-src="//domain.com/img3.jpg"> 
  </div>
</template>

<!--自定义error和loading占位符图像--> 
<template>
  <div v-lazy-container="{ selector: 'img', error: 'xxx.jpg', loading: 'xxx.jpg' }">
    <img data-src="//domain.com/img1.jpg">
    <img data-src="//domain.com/img2.jpg">
    <img data-src="//domain.com/img3.jpg">  
  </div>
</template>

注意:v-lazy='src'中的src一定要使用data里面的变量,不能写真实的图片路径,这样会报错导致没有效果,因为vue的自定义指令必须对应data中的变量 只能是变量;v-lazy-container内部指定元素设置的data-src是图片的真实路径,不能是data变量,这个和v-lazy完全相反。


给每一个状态添加样式

 //加载中的样式
  img[lazy=loading] {}
//加载错误时的样式
  img[lazy=error] { }
//加载后的样式
  img[lazy=loaded] { }

栗子

img[lazy=loading]{
  transform:scaleX(0.3) scaleY(0.5);
}
img[lazy=loaded]{
  animation:appear 0.3s;
  animation-fill-mode: both;
}
@keyframes appear {
  from{
    opacity:0;
  }
  to{
    opacity:1;
  }
}

路由懒加载

首先,可以将异步组件定义为返回一个 Promise 的工厂函数 (该函数返回的 Promise 应该 resolve 组件本身):

const Foo = () => Promise.resolve({ /* 组件定义对象 */ })

第二,在 Webpack 2 中,我们可以使用动态 import语法来定义代码分块点 (split point):

import('./Foo.vue') // 返回 Promise

如果您使用的是 Babel,你将需要添加 syntax-dynamic-import 插件,才能使 Babel 可以正确地解析语法。

结合这两者,这就是如何定义一个能够被 Webpack 自动代码分割的异步组件。

const Foo = () => import('./Foo.vue')

在路由配置中什么都不需要改变,只需要像往常一样使用 Foo:

const router = new VueRouter({
  routes: [
    { path: '/foo', component: Foo }
  ]
})
把组件按组分块

有时候我们想把某个路由下的所有组件都打包在同个异步块 (chunk) 中。只需要使用 命名 chunk,一个特殊的注释语法来提供 chunk name (需要 Webpack > 2.4)。

const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')
const Baz = () => import(/* webpackChunkName: "group-foo" */ './Baz.vue')

Webpack 会将任何一个异步模块与相同的块名称组合到相同的异步块中。
参考:路由器懒加载

上一篇下一篇

猜你喜欢

热点阅读