Vue懶加載

　　懶加載（LazyLoad）一直是前端的優化方案之一。簡單來說就是延遲加載或按需加載，即在需要的時候的時候進行加載。

　　   它的核心思想是：當用戶想看頁面某個區域時，再加載該區域的數據。這在一定程度上減輕了服務器端的壓力，也加快了頁面的呈現速度。

　　   懶加載多用於圖片，因為它屬於流量的大頭。最典型的懶加載實現方案是先將需要懶加載的圖片的src隱藏掉，這樣圖片就不會下載，然后在圖片需要呈現給用戶時再加上src屬性。

 

　　　　安裝插件

　　　　　　npm install vue-lazyload --save  (如果運行報錯就卸了再用cnpm下)

一、 Vue圖像懶加載

　　(一)、引用文件

　　　　一般在main.js全局引用，且配置好圖片

//引入vue懶加載
import VueLazyload from 'vue-lazyload'

//方法一：  沒有頁面加載中的圖片和頁面圖片加載錯誤的圖片顯示
// Vue.use(VueLazyload)

//方法二：  顯示頁面圖片加載中的圖片和頁面圖片加載錯誤的圖片
//引入圖片
import loading from '@/assets/images/load.jpg'
//注冊圖片懶加載  
Vue.use(VueLazyload, {
  // preLoad: 1.3,
  error: '@/assets/images/error.jpg',//圖片錯誤的替換圖片路徑(可以使用變量存儲)
  loading: loading,//正在加載的圖片路徑(可以使用變量存儲)
  // attempt: 1
})

　　　一些參數選項配置說明：　　　

　　　

　　(二)、在組件內使用

　　　　　　在入口文件里引用vue-lazyload后，在組件任何地方都可以直接使用，把 img標簽里的 :src  換成 v-lazy

<li class="yui3-u-1-5" v-for="goods in goodsList" :key="goods.id">
  <div class="list-wrap">
    <div class="p-img">
      <!-- <a href="item.html" target="_blank">
        <img :src="goods.defaultImg" />
      </a>-->
      <!-- 聲明式導航 -->
      <router-link :to="`/detail/${goods.id}`">
        <!-- 使用圖片懶加載之前 -->
        <!-- <img :src="goods.defaultImg" /> -->
        <!-- 使用圖片懶加載 -->
        <img v-lazy="goods.defaultImg" />
      </router-link>
    </div>
  </div>
</li>

二、路由懶加載

　　(一)、為什么要使用路由懶加載

　　　　為給客戶更好的客戶體驗，首屏組件加載速度更快一些，解決白屏問題。

 

　　(二)、定義

　　　　懶加載簡單來說就是延遲加載或按需加載，即在需要的時候的時候進行加載。

 

　　(三)、使用

　　　　常用的懶加載方式有兩種：即使用vue異步組件 和 ES中的import

　　　　　　1、未用懶加載，vue中路由代碼如下

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
    }
  ]
})                          

　　　　　　2、vue異步組件實現懶加載

　　　　　　　　方法如下：component：resolve=>(require(['需要加載的路由的地址'])，resolve)

import Vue from 'vue'
import Router from 'vue-router'
　　/* 此處省去之前導入的HelloWorld模塊 */
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',

　　 //vue異步組件實現懶加載

component: resolve=>(require(["@/components/HelloWorld"],resolve)) } ] })

　　　　　　3、ES 提出的import方法，（------最常用------）

　　　　　　　　方法如下：const HelloWorld = （）=>import('需要加載的模塊地址')　　routes里跟未用懶加載一樣使用HelloWorld 這個變量

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
    }
  ]
})

 

三、組件懶加載

　　　　相同與路由懶加載

　　　　　　1、原來組件中寫法

<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>

　　　　　　2、異步方法

<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>

　　　　　　3、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>

四、總結：

　　(一)、在入口文件(main.js)中引用vue-lazyload后，在組件任何地方都可以直接使用，把 img標簽里的 :src  換成 v-lazy

　　(二)、路由和組件的常用兩種懶加載方式：

　　　　1、vue異步組件實現路由懶加載

　　　　　　component：resolve=>(['需要加載的路由的地址'，resolve])

　　　　2、es提出的import(推薦使用這種方式)

　　　　　　const HelloWorld = （）=>import('需要加載的模塊地址')