Vue项目优化（大图片懒加载、路由懒加载、组件懒加载）

前言：

前端项目中难免会遇到大量的切图展示，如果单张图片过大，在加载的过程中可能会导致浏览器瀑布流渲染时间过长，延长用户等待时间，这种情况可以使用CDN分发，当然也可以使用图片懒加载，接下来主要介绍如何实现大图懒加载、以及常见的组件懒加载、路由懒加载

---

1.图片懒加载

本人使用VueLazyLoad插件，首先安装插件

npm install VueLazyLoad --save

在main.js中引入并使用

import VueLazyLoad from 'vue-lazyload'

Vue.use(VueLazyLoad, {
  //图片大小比例
  preload: 1.5,
  //加载次数
  attempt: 3,
  //加载过程中的默认等待图片
  loading: require('../src/assets/images/mr.png')
 })

使用
注意：图片的路径地址要使用require方式引入，因为使用webpack进行打包之后目录会发生变化，采用相对路径的写法就会找不到图片。只需要将src替换成为v-lazy即可

<img v-lazy="item.path" />

2.路由懒加载

 component: () => import('../views/department/questionNaire.vue'),

3.组件懒加载

  components: {
    mHeader: () => import("@/components/mheader"),
    tabbar: () => import("@/components/tabbar"),
    Scroll: () => import("@/components/scroll"),
  },