什么是懶加載？

懶加載：也叫延遲加載，即在需要的時(shí)候進(jìn)行加載，隨用隨載。

為什么需要懶加載？

像vue這種單頁(yè)面應(yīng)用，如果沒(méi)有使用到懶加載，webpack打包的文件過(guò)大，造成進(jìn)入首頁(yè)時(shí)，加載的資源過(guò)多，時(shí)間過(guò)長(zhǎng)，即使做了loading也不利于用戶體驗(yàn)，而運(yùn)用懶加載可以將頁(yè)面進(jìn)行劃分，需要的時(shí)候加載頁(yè)面，可以有效的分擔(dān)首頁(yè)所承擔(dān)的加載壓力，減少首頁(yè)加載事件，簡(jiǎn)單來(lái)說(shuō)就是進(jìn)入首頁(yè)不用一次加載過(guò)多資源造成時(shí)間過(guò)長(zhǎng)。

圖片懶加載

安裝

npm i vue-lazyload -S

使用方法

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

//  自定義參數(shù)選項(xiàng)配置
Vue.use(VueLazyload, {
  preLoad: 1.3, // 提前加載高度（數(shù)字 1 表示 1 屏的高度） 默認(rèn)值:1.3
  error: 'dist/error.png', // 當(dāng)加載圖片失敗的時(shí)候
  loading: 'dist/loading.gif', // 圖片加載狀態(tài)下顯示的圖片
  attempt: 1 //  加載錯(cuò)誤后最大嘗試次數(shù) 默認(rèn)值:1
})

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

template:

<!-- 使用方法1: 可能圖片url是直接從后臺(tái)拿到的，把':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差不多,通過(guò)自定義指令去定義的，不過(guò)v-lazy-container掃描的是內(nèi)部的子元素 --> 
<template>
  <div v-lazy-container="{ selector: 'img'}">
    <img data-src="http://domain.com/img1.jpg">
    <img data-src="http://domain.com/img2.jpg">
    <img data-src="http://domain.com/img3.jpg"> 
  </div>
</template>

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

注意：v-lazy='src'中的src一定要使用data里面的變量，不能寫(xiě)真實(shí)的圖片路徑，這樣會(huì)報(bào)錯(cuò)導(dǎo)致沒(méi)有效果，因?yàn)関ue的自定義指令必須對(duì)應(yīng)data中的變量 只能是變量；v-lazy-container內(nèi)部指定元素設(shè)置的data-src是圖片的真實(shí)路徑，不能是data變量，這個(gè)和v-lazy完全相反。

給每一個(gè)狀態(tài)添加樣式

 //加載中的樣式
  img[lazy=loading] {}
//加載錯(cuò)誤時(shí)的樣式
  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;
  }
}

路由懶加載

• 路由的懶加載顧名思義就是用到哪個(gè)組件，就加載哪個(gè)組件
• 結(jié)合 Vue 的異步組件和 Webpack 的代碼分割功能，輕松實(shí)現(xiàn)路由組件的懶加載。

首先，可以將異步組件定義為返回一個(gè) Promise 的工廠函數(shù) (該函數(shù)返回的 Promise 應(yīng)該 resolve 組件本身)：

const Foo = () => Promise.resolve({ /* 組件定義對(duì)象 */ })

第二，在 Webpack 2 中，我們可以使用動(dòng)態(tài) import語(yǔ)法來(lái)定義代碼分塊點(diǎn) (split point)：

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

如果您使用的是 Babel，你將需要添加 syntax-dynamic-import 插件，才能使 Babel 可以正確地解析語(yǔ)法。

結(jié)合這兩者，這就是如何定義一個(gè)能夠被 Webpack 自動(dòng)代碼分割的異步組件。

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

在路由配置中什么都不需要改變，只需要像往常一樣使用 Foo：

const router = new VueRouter({
  routes: [
    { path: '/foo', component: Foo }
  ]
})

把組件按組分塊

有時(shí)候我們想把某個(gè)路由下的所有組件都打包在同個(gè)異步塊 (chunk) 中。只需要使用 命名 chunk，一個(gè)特殊的注釋語(yǔ)法來(lái)提供 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 會(huì)將任何一個(gè)異步模塊與相同的塊名稱組合到相同的異步塊中。
參考：路由器懶加載