MK
摩柯社区 - 一个极简的技术知识社区
AI 面试

Vue懒加载 实际项目中的典型应用场景与案例分析

2023-10-074.7k 阅读

Vue 懒加载基础概念

在探讨 Vue 懒加载在实际项目中的应用场景之前，我们先来深入了解一下 Vue 懒加载的基本概念。

什么是懒加载

懒加载，也被称为延迟加载，其核心思想是在需要的时候才加载资源，而不是在页面初始加载时就将所有资源都一次性加载完毕。在前端开发中，这通常应用于图片、组件、脚本等资源的加载。对于 Vue 而言，懒加载主要体现在组件的延迟加载和图片的延迟加载等方面。

以组件懒加载为例，当一个 Vue 应用包含众多组件时，如果在初始加载时就将所有组件都渲染并加载到内存中，会导致页面初始化时间过长，影响用户体验。而通过懒加载，只有当组件实际需要被展示时，才会触发加载操作，这样可以显著提高页面的加载性能。

Vue 中实现懒加载的方式

在 Vue 中，实现懒加载主要有两种常见方式：使用 import() 语法和 vue - lazyload 插件。

  1. 使用 import() 语法实现组件懒加载 Vue Router 中就经常利用 import() 语法来实现路由组件的懒加载。例如，在配置路由时：
import Vue from 'vue';
import Router from 'vue-router';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/home',
      name: 'Home',
      component: () => import('@/components/Home.vue')
    },
    {
      path: '/about',
      name: 'About',
      component: () => import('@/components/About.vue')
    }
  ]
});

在上述代码中，component: () => import('@/components/Home.vue') 这种写法就是利用了 ES2020 的动态导入特性。当用户访问 /home 路由时，才会加载 Home.vue 组件，而不是在应用启动时就加载。

  1. 使用 vue - lazyload 插件实现图片懒加载 首先，需要安装 vue - lazyload：
npm install vue - lazyload --save

然后在 Vue 项目的入口文件（通常是 main.js）中进行配置：

import Vue from 'vue';
import App from './App.vue';
import VueLazyload from 'vue - lazyload';

Vue.use(VueLazyload, {
  preLoad: 1.3,
  error: require('./assets/error.png'),
  loading: require('./assets/loading.gif'),
  attempt: 1
});

new Vue({
  render: h => h(App)
}).$mount('#app');

在模板中使用时，就可以像这样：

<template>
  <div>
    <img v - lazy="imageUrl" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: 'https://example.com/image.jpg'
    };
  }
};
</script>

这里的 v - lazy 指令会在图片进入视口（或接近视口，可通过 preLoad 参数配置）时才加载图片，error 和 loading 分别指定了图片加载失败和加载中显示的占位图。

Vue 懒加载在实际项目中的典型应用场景

了解了 Vue 懒加载的基本概念和实现方式后，接下来我们深入探讨它在实际项目中的典型应用场景。

大型单页应用（SPA）中的组件懒加载

  1. 路由组件懒加载优化首屏加载时间 在大型单页应用中，通常会有多个路由组件，每个组件可能包含大量的 HTML、CSS 和 JavaScript 代码。如果在应用启动时一次性加载所有路由组件，会导致首屏加载时间过长。通过路由组件懒加载，只有当用户访问特定路由时，才会加载对应的组件。

例如，一个电商类的 SPA 应用，可能有首页、商品列表页、商品详情页、购物车页、个人中心页等多个路由。首页作为用户最先看到的页面，对加载速度要求极高。通过懒加载，首页在加载时不需要加载商品详情页、购物车页等其他组件的代码，大大减少了初始加载的文件体积，提高了首屏加载速度。

  1. 嵌套路由组件的懒加载提升用户体验 在一些复杂的应用中，路由可能存在多层嵌套。比如在一个企业级项目管理应用中，项目详情页面可能有多个子页面，如任务列表、文档管理、团队成员等，这些子页面可以作为嵌套路由组件。通过懒加载这些嵌套路由组件，当用户展开项目详情中的某个子功能时，才加载相应的组件，避免了不必要的资源浪费，提升了用户在使用过程中的体验。

图片懒加载在内容展示型网站中的应用

  1. 新闻资讯类网站的图片优化 新闻资讯类网站通常会有大量的图片，如文章配图、广告图片等。如果这些图片在页面加载时全部加载，会使页面加载速度变得非常缓慢，尤其是对于网络环境较差的用户。通过图片懒加载，只有当图片即将进入浏览器视口时才加载，这样可以保证用户在浏览新闻列表时，即使页面中有很多图片，也能快速加载出文字内容，当用户滚动页面接近图片时，图片才会加载显示。

例如，一篇新闻文章中包含了多张配图，在用户未滚动到图片位置时，图片并不会加载，节省了网络流量和加载时间。当用户滚动页面，图片进入视口（或接近视口）时，图片开始加载并显示，为用户提供了流畅的阅读体验。

  1. 图片画廊和相册的性能提升 对于图片画廊或相册类的页面，可能展示了成百上千张图片。如果一次性加载所有图片，不仅会消耗大量的网络带宽，还可能导致浏览器卡顿甚至崩溃。使用图片懒加载，每次用户滚动页面，只有新进入视口的图片才会被加载。

以一个摄影作品展示网站为例，用户可以浏览不同摄影师的作品集，每个作品集可能包含几十张甚至上百张高清图片。通过图片懒加载，用户在浏览作品集时，图片按需加载，用户可以快速浏览图片缩略图，当点击查看大图时，大图才会懒加载显示，极大地提升了用户浏览图片画廊的性能和体验。

长列表懒加载在数据展示项目中的应用

  1. 社交平台的动态列表优化 在社交平台中，用户的动态列表可能非常长，包含了大量的文本、图片、视频等内容。如果一次性加载所有动态，会导致页面加载缓慢，并且占用大量内存。通过长列表懒加载，当用户滚动到列表底部时，自动加载更多数据，保证用户在浏览过程中能够流畅加载新的动态内容。

例如，微博、抖音等社交平台，用户的关注列表或推荐内容列表都是长列表形式。当用户不断向下滚动时，新的动态会不断加载出来，而不是一开始就加载所有可能的动态，这样既提高了页面的加载性能，又节省了用户的流量。

  1. 电商平台的商品列表加载优化 电商平台的商品列表页往往展示了大量的商品。如果一次性加载所有商品信息，包括图片、价格、描述等，会使页面加载时间过长，影响用户购物体验。长列表懒加载在这种场景下非常适用，用户在浏览商品列表时，随着滚动不断加载新的商品，保证了用户可以快速开始浏览商品，并且在浏览过程中不会因为加载过多商品而导致页面卡顿。

Vue 懒加载实际项目案例分析

通过实际案例，我们可以更直观地了解 Vue 懒加载在项目中的具体应用和效果。

案例一：一个知识付费类 SPA 应用的组件懒加载优化

  1. 项目背景 这是一个知识付费类的单页应用，用户可以在应用中购买课程、观看视频、阅读文章等。应用包含多个路由组件，如首页、课程列表页、课程详情页、用户中心页、支付页面等。随着业务的发展，应用的功能越来越多，组件的代码量也不断增加，导致应用的首屏加载时间过长，用户流失率上升。

  2. 优化前的情况 在优化之前，应用的路由配置如下：

import Vue from 'vue';
import Router from 'vue-router';
import Home from '@/components/Home.vue';
import CourseList from '@/components/CourseList.vue';
import CourseDetail from '@/components/CourseDetail.vue';
import UserCenter from '@/components/UserCenter.vue';
import Payment from '@/components/Payment.vue';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/courseList',
      name: 'CourseList',
      component: CourseList
    },
    {
      path: '/courseDetail/:id',
      name: 'CourseDetail',
      component: CourseDetail
    },
    {
      path: '/userCenter',
      name: 'UserCenter',
      component: UserCenter
    },
    {
      path: '/payment',
      name: 'Payment',
      component: Payment
    }
  ]
});

这种方式在应用启动时，会将所有路由组件都加载到内存中。经过性能测试，首屏加载时间达到了 5 秒，这对于一个追求快速响应的应用来说是难以接受的。

  1. 优化方案 采用组件懒加载的方式对路由配置进行修改：
import Vue from 'vue';
import Router from 'vue-router';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: () => import('@/components/Home.vue')
    },
    {
      path: '/courseList',
      name: 'CourseList',
      component: () => import('@/components/CourseList.vue')
    },
    {
      path: '/courseDetail/:id',
      name: 'CourseDetail',
      component: () => import('@/components/CourseDetail.vue')
    },
    {
      path: '/userCenter',
      name: 'UserCenter',
      component: () => import('@/components/UserCenter.vue')
    },
    {
      path: '/payment',
      name: 'Payment',
      component: () => import('@/components/Payment.vue')
    }
  ]
});
  1. 优化效果 经过优化后，再次进行性能测试，首屏加载时间缩短到了 2 秒。这是因为首页加载时，只加载了必要的代码，其他路由组件在用户访问相应路由时才会加载，大大提高了首屏加载速度，提升了用户体验，同时也降低了用户流失率。

案例二：一个图片分享社区的图片懒加载实践

  1. 项目背景 这是一个图片分享社区，用户可以上传、浏览和分享各种图片。社区中有大量的图片展示，包括用户的个人相册、热门图片推荐、分类图片等。由于图片数量众多且部分图片分辨率较高，导致页面加载缓慢，用户在浏览图片时经常出现卡顿现象。

  2. 优化前的情况 在优化之前，图片在模板中的展示方式如下：

<template>
  <div>
    <img v - for="(image, index) in images" :key="index" :src="image.url" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: [
        { url: 'https://example.com/image1.jpg' },
        { url: 'https://example.com/image2.jpg' },
        // 大量图片数据
      ]
    };
  }
};
</script>

这种方式会在页面加载时，一次性请求所有图片，导致页面加载时间极长，特别是对于网络环境较差的用户。

  1. 优化方案 引入 vue - lazyload 插件来实现图片懒加载。首先安装插件并在 main.js 中进行配置：
import Vue from 'vue';
import App from './App.vue';
import VueLazyload from 'vue - lazyload';

Vue.use(VueLazyload, {
  preLoad: 1.3,
  error: require('./assets/error.png'),
  loading: require('./assets/loading.gif'),
  attempt: 1
});

new Vue({
  render: h => h(App)
}).$mount('#app');

然后在模板中修改图片展示方式：

<template>
  <div>
    <img v - for="(image, index) in images" :key="index" v - lazy="image.url" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: [
        { url: 'https://example.com/image1.jpg' },
        { url: 'https://example.com/image2.jpg' },
        // 大量图片数据
      ]
    };
  }
};
</script>
  1. 优化效果 优化后，页面加载速度明显提升。用户在浏览图片时，只有当图片即将进入视口时才会加载，避免了一次性加载大量图片导致的卡顿。同时，通过设置 loading 和 error 占位图，提升了用户在图片加载过程中的体验。经过用户反馈，优化后浏览图片的流畅度得到了极大改善，用户活跃度也有所提高。

案例三：一个电商后台管理系统的长列表懒加载改进

  1. 项目背景 该电商后台管理系统用于管理商品、订单、用户等数据。其中商品列表页面需要展示大量的商品信息，包括商品名称、价格、库存、销量等。随着商品数量的不断增加，页面加载和滚动变得越来越卡顿，影响了管理员的工作效率。

  2. 优化前的情况 优化前，商品列表数据在页面加载时一次性获取并渲染：

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>商品名称</th>
          <th>价格</th>
          <th>库存</th>
          <th>销量</th>
        </tr>
      </thead>
      <tbody>
        <tr v - for="(product, index) in products" :key="index">
          <td>{{ product.name }}</td>
          <td>{{ product.price }}</td>
          <td>{{ product.stock }}</td>
          <td>{{ product.sales }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      products: []
    };
  },
  mounted() {
    this.fetchProducts();
  },
  methods: {
    async fetchProducts() {
      const response = await axios.get('/api/products');
      this.products = response.data;
    }
  }
};
</script>

这种方式在商品数量较多时，页面加载缓慢，滚动也不流畅。

  1. 优化方案 采用长列表懒加载的方式。首先创建一个自定义指令来实现滚动加载：
Vue.directive('lazy - load', {
  inserted(el, binding) {
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          binding.value();
          observer.unobserve(el);
        }
      });
    });
    observer.observe(el);
  }
});

然后在模板中使用该指令：

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>商品名称</th>
          <th>价格</th>
          <th>库存</th>
          <th>销量</th>
        </tr>
      </thead>
      <tbody>
        <tr v - for="(product, index) in products" :key="index">
          <td>{{ product.name }}</td>
          <td>{{ product.price }}</td>
          <td>{{ product.stock }}</td>
          <td>{{ product.sales }}</td>
        </tr>
        <tr v - if="hasMore" v - lazy - load="fetchMoreProducts">
          <td colspan="4" style="text - align: center;">加载更多...</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      products: [],
      page: 1,
      limit: 10,
      hasMore: true
    };
  },
  mounted() {
    this.fetchProducts();
  },
  methods: {
    async fetchProducts() {
      const response = await axios.get(`/api/products?page=${this.page}&limit=${this.limit}`);
      this.products = response.data;
      if (response.data.length < this.limit) {
        this.hasMore = false;
      }
    },
    async fetchMoreProducts() {
      this.page++;
      const response = await axios.get(`/api/products?page=${this.page}&limit=${this.limit}`);
      this.products = [...this.products, ...response.data];
      if (response.data.length < this.limit) {
        this.hasMore = false;
      }
    }
  }
};
</script>
  1. 优化效果 通过长列表懒加载优化后，商品列表页面的加载速度和滚动流畅度都得到了显著提升。管理员在浏览商品列表时，不再需要等待大量商品数据一次性加载完成，而是随着滚动不断加载新的数据，大大提高了工作效率。同时，这种方式也减少了服务器的压力，因为每次只请求部分数据。

总结与注意事项

Vue 懒加载在实际项目中有着广泛的应用场景，无论是提升首屏加载速度、优化图片展示，还是改善长列表的性能，都能发挥重要作用。通过上述案例分析，我们可以看到懒加载在不同场景下的具体实现和显著效果。

在实际应用中，也有一些需要注意的事项。对于组件懒加载，要注意代码分割后的文件大小，避免分割后的文件过多或过大，影响加载性能。对于图片懒加载，要合理设置 preLoad 参数，根据不同的业务场景和用户设备情况，选择合适的预加载距离，既保证图片能及时加载，又不浪费过多的网络资源。对于长列表懒加载，要处理好数据的分页逻辑和滚动加载的边界条件，避免出现重复加载或加载不完整的情况。

总之，熟练掌握 Vue 懒加载技术，并在实际项目中合理应用，可以为用户带来更流畅、高效的使用体验，同时也能提升项目的整体性能和可维护性。