一、图片懒加载

1. 使用Vue-lazyload插件

// 安装插件
npm install vue-lazyload --save

// 在Vue中使用
import Vue from 'vue';
import VueLazyload from 'vue-lazyload';

Vue.use(VueLazyload);

2. 自定义指令实现懒加载

你也可以通过自定义指令来实现懒加载功能。

Vue.directive('lazy', {
  inserted: function(el) {
    el.src = el.getAttribute('data-src');
  }
});

// 使用
<img v-lazy="largeImageSrc" data-src="path/to/largeImage.jpg" />

二、图片压缩

1. 服务器端压缩

convert original.jpg -resize 800x600 -quality 85 compressed.jpg

2. 客户端压缩

compressorjs.compress('path/to/largeImage.jpg', {
  success: function(result) {
    // 使用处理后的图片
  }
});

三、图片预加载

function preloadImages(imagePaths) {
  imagePaths.forEach(path => {
    const img = new Image();
    img.src = path;
  });
}

preloadImages(['path/to/importantImage1.jpg', 'path/to/importantImage2.jpg']);

四、使用CDN

<img src="https://cdn.example.com/path/to/image.jpg" />

五、响应式图片

<img srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w" src="small.jpg" />

总结