一、图片懒加载

原理： 图片只有给 src 赋值时，浏览器才会请求图片资源，所以只需要把 src 的值存储起来，当需要加载图片时，再赋值给 src 就可以了

1、下载 vue-lazyload 包

npm i vue-lazyload@1.3.3 -S

2、导入、注册（-- main.js）

import VueLazyLoad from 'vue-lazyload'

Vue.use(VueLazyLoad, {
  loading: '/loading-svg/loading-bars.svg' // 加载图片。加载图片的位置应放在 public 目录下
})

3、将所有 :src 改为 v-lazy

提示： 不要给轮播图使用，因为最后一张图片会显示空白

如：

  改前：<img :src="/imgs/nav-img/nav-3-2.jpg" alt="">
  改后：<img v-lazy="'/imgs/nav-img/nav-3-2.jpg'" alt="">

  改前：<img :src="item1.pic" class="img">
  改后：<img v-lazy="item1.pic" alt="">

【BUG】给轮播图使用懒加载后，第一张和最后一张轮播图空白的问题

解决方法： 第一张和最后一张轮播图不用懒加载

<!-- options：配置轮播项 -->
<swiper v-if="swiperOption.focusList.length !== 0" :options="swiperOption">
  <!-- 轮播项 -->
  <swiper-slide v-for="(item, index) in swiperOption.focusList" :key="index">
    <a href="javascript:">

      -- 改（旧）
      <!-- <img v-lazy="item.picUrl"> -->

      -- 改（新）
      <img v-if="index == 0 || index == swiperOption.focusList.length-1" :src="item.picUrl">
      <img :key="item.picUrl.src" v-lazy="item.picUrl">
      --

    </a>
  </swiper-slide>
  <!-- 分页器 -->
  <div slot="pagination" class="swiper-pagination"></div>
</swiper>

二、路由懒加载

作用： 解决一次性加载所有路由资源，导致首屏加载过慢的问题，也叫 首屏加载白屏 问题

特性： 根据当前路由需要的资源，进行加载。没有显示的路由就不加载那个路由依赖的资源

查看路由按需加载是否实现成功： 在 Network → JS 中查看是否加载 数字js文件（如：1.js、2.js、3.js ...）

（一）require 方法

（1）删除预加载（-- vue.config.js）

chainWebpack: config => {
  config.plugins.delete('prefetch')
}

（2）将所有 component 的值改为 require 方法

语法：resolve => require(['组件路径]', resolve)
  旧：component: Login
  新：component: resolve => require(['./pages/login.vue'], resolve)

（3）删除引入但为使用的组件

（二）import 方法（推荐）

（1）删除预加载（-- vue.config.js）

chainWebpack: config => {
  config.plugins.delete('prefetch')
}

（2）修改 component（-- @/router/index.js）

旧：component: Login
新：component: () => import('./pages/login.vue')

（3）删除引入的组件（-- 同上）

-- 删
import Login from '@/views/Login'
--