Vue懒加载实战：让你的应用飞起来！_vue懒加载的作用-CSDN博客

本文链接：https://blog.csdn.net/qq_48652579/article/details/148913450

大家好，我是小杨，一个在前端圈摸爬滚打了6年的老司机。今天想和大家聊聊Vue项目性能优化的必杀技——懒加载。这玩意儿用好了，页面加载速度能快一倍不止，用户再也不抱怨"这网页怎么这么卡"了！

一、懒加载是啥？为啥要用？

想象一下你去餐厅吃饭，服务员一次性把所有菜都端上来，桌子都放不下，你看着也头疼。懒加载就像聪明的服务员，先上你马上要吃的，其他的等你要了再上。

在Vue里，懒加载主要用在两个地方：

组件懒加载：路由切换时才加载对应组件
图片懒加载：图片进入可视区域才加载

二、组件懒加载实战

以前我们是这样引入组件的：

import Home from './views/Home.vue'
import About from './views/About.vue'

这就像一口气把整本菜单背下来，多累啊！现在试试懒加载：

const Home = () => import('./views/Home.vue')
const About = () => import('./views/About.vue')

配合vue-router使用更香：

const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: () => import('./views/Home.vue')
    },
    {
      path: '/about',
      component: () => import('./views/About.vue')
    }
  ]
})

效果：首次加载只下载当前页面的代码，其他页面等用户点了再加载。

三、图片懒加载实战

图片懒加载我推荐用vue-lazyload这个插件，用起来贼简单：

先安装：

npm install vue-lazyload

在main.js配置：

import VueLazyload from 'vue-lazyload'

Vue.use(VueLazyload, {
  preLoad: 1.3, // 预加载高度比例
  error: require('./assets/error.png'), // 加载失败显示的图片
  loading: require('./assets/loading.gif'), // 加载中显示的图片
  attempt: 3 // 尝试加载次数
})

把img标签的src换成v-lazy：

<!-- 以前 -->
<img src="我.jpg">

<!-- 现在 -->
<img v-lazy="我.jpg">

效果：页面滚动到图片位置时才加载，首屏加载速度直接起飞！

四、高级玩法：自定义懒加载指令

觉得插件太重？自己写个简单的图片懒加载也不难：

// main.js
Vue.directive('lazy', {
  inserted(el, binding) {
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          el.src = binding.value
          observer.unobserve(el)
        }
      })
    })
    observer.observe(el)
  }
})

用的时候：

<img v-lazy="我.jpg">

五、性能对比实测

上周我做了个对比测试：

不用懒加载：首屏加载2.8MB，完全加载4.2MB
用了懒加载：首屏只要1.2MB，其他按需加载

效果立竿见影！

六、避坑指南

别懒加载首屏内容：首屏该显示的东西要直接加载
合理设置预加载：vue-lazyload的preLoad别设太大
注意SEO影响：懒加载内容可能不被搜索引擎抓取
提供加载状态：记得加loading动画，别让用户对着空白发呆

七、最后说两句

懒加载就像精明的管家，帮你把资源安排得明明白白。但记住两点：

不是所有东西都适合懒加载
懒加载不是性能优化的唯一手段

我见过有人把所有组件都懒加载，结果切换路由时疯狂转圈圈，这就本末倒置了。

⭐ 写在最后

请大家不吝赐教,在下方评论或者私信我,十分感谢🙏🙏🙏.

✅ 认为我某个部分的设计过于繁琐,有更加简单或者更高逼格的封装方式

✅ 认为我部分代码过于老旧,可以提供新的API或最新语法

✅ 对于文章中部分内容不理解

✅ 解答我文章中一些疑问

✅ 认为某些交互,功能需要优化,发现BUG

✅ 想要添加新功能,对于整体的设计,外观有更好的建议

✅ 一起探讨技术加qq交流群：906392632

最后感谢各位的耐心观看，既然都到这了，点个 👍赞再走吧！