Vue3+Element Plus进行图片加载优化全攻略

npm create vite@latest my-project --template vue-ts
cd my-project
npm i element-plus @element-plus/icons-vue

// main.ts
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
 
createApp(App)
  .use(ElementPlus)
  .mount('#app')

<template>
  <el-image 
    :src="imageUrl"
    lazy
    :preview-src-list="previewList"
  >
    <template #placeholder>
      <div class="image-placeholder">
        <el-icon :size="30"><Loading /></el-icon>
      </div>
    </template>
  </el-image>
</template>
 
<style>
.image-placeholder {
  @apply flex items-center justify-center h-full bg-gray-100;
  min-height: 200px;
}
</style>

<el-image
  :src="image640"
  :srcset="`${image640} 640w, ${image1024} 1024w`"
  sizes="(max-width: 640px) 100vw, 1024px"
/>

npm install vite-plugin-image-optimizer -D
// vite.config.ts
import imageOptimizer from 'vite-plugin-image-optimizer'
 
export default defineConfig({
  plugins: [
    imageOptimizer({
      webp: {
        quality: 75,
      }
    })
  ]
})

<picture>
  <source srcset="image.webp" type="image/webp">
  <el-image :src="image.jpg" />
</picture>

// vite.config.ts
export default defineConfig({
  build: {
    assetsDir: 'static',
  },
  base: process.env.NODE_ENV === 'production' 
    ? 'https://your-cdn-domain.com/' 
    : '/'
})

// 使用sharp进行压缩
const sharp = require('sharp')
 
async function compressImage(input, output) {
  await sharp(input)
    .webp({ quality: 80 })
    .toFile(output)
}

<template>
  <div class="image-gallery">
    <el-image 
      v-for="(img, index) in lazyImages"
      :key="index"
      :src="img.placeholder"
      :srcset="`${img.webp} 1024w, ${img.webpSmall} 640w`"
      :lazy="true"
      :load-src="img.webp"
      @load="handleImageLoad"
    >
      <template #error>
        <div class="error-fallback">
          <el-icon><Picture /></el-icon>
        </div>
      </template>
    </el-image>
  </div>
</template>
 
<script setup>
import { useIntersectionObserver } from '@vueuse/core'
 
const imageRefs = ref([])
 
onMounted(() => {
  imageRefs.value.forEach((el, index) => {
    const { stop } = useIntersectionObserver(
      el,
      ([{ isIntersecting }]) => {
        if (isIntersecting) {
          loadActualImage(index)
          stop()
        }
      }
    )
  })
})
</script>