详细介绍在Vue3单文件组件中如何进行图片优化以提升移动端性能

alankuo

于 2024-12-09 05:55:31 发布

阅读量1.1k

点赞数 14

文章标签：前端

本文链接：https://blog.csdn.net/alankuo/article/details/144316520

版权

图片格式选择与压缩
- 格式选择
  - WebP格式：在移动端，WebP是一种非常优秀的图片格式。它在相同质量下，文件大小比JPEG和PNG格式更小。对于大多数照片类型的图像，WebP的有损压缩可以提供很好的视觉效果和显著的文件大小减少。在Vue3单文件组件中，确保后端提供的图片尽可能是WebP格式，或者在构建过程中使用工具将图片转换为WebP格式。
  - AVIF格式：AVIF是一种较新的图像格式，它在压缩效率上比WebP更高，尤其在高分辨率和高色彩深度的图片上表现出色。不过，它的兼容性相对WebP稍差一些，但在支持的设备上能进一步减小图片体积。
- 压缩工具使用
  - 在线工具：有许多在线图片压缩工具，如TinyPNG（https://tinypng.com/）。这些工具可以方便地将JPEG、PNG等格式的图片进行压缩，减少文件大小。在开发过程中，可以将原始图片上传到这些工具网站进行压缩，然后将压缩后的图片应用到单文件组件中。
  - 构建工具集成：在项目的构建过程中，可以使用如image - webpack - loader（针对Webpack构建工具）或vite - plugin - imagetools（针对Vite构建工具）等插件来自动压缩图片。以image - webpack - loader为例，在Webpack配置文件中添加以下规则：

module.exports = {
    module: {
        rules: [
            {
                test: /\.(png|jpe?g|gif|svg)$/i,
                use: [
                    {
                        loader: 'file - loader',
                    },
                    {
                        loader: 'image - webpack - loader',
                        options: {
                            mozjpeg: {
                                progressive: true,
                                quality: 65
                            },
                            // optipng.enabled: false will disable optipng
                            optipng: {
                                enabled: false
                            },
                            pngquant: {
                                quality: [0.65, 0.90],
                                speed: 4
                            },
                            gifsicle: {
                                interlaced: false
                            },
                            // the webp option will enable WEBP
                            webp: {
                                quality: 75
                            }
                        }
                    }
                ]
            }
        ]
    }
};

 - 这个配置会在构建过程中对匹配的图片文件进行压缩处理，根据不同的图片格式采用不同的压缩参数，如对于JPEG图片（`mozjpeg`部分），设置为渐进式加载（`progressive: true`），质量为65%等。

图片懒加载
- 使用第三方库实现懒加载
  - vue - lazyload库：这是一个在Vue项目中广泛使用的图片懒加载库。首先，通过npm安装vue - lazyload：

npm install vue - lazyload

 - 然后在项目的入口文件（如`main.js`）中进行配置：

import { createApp } from 'vue';
import App from './App.vue';
import VueLazyload from 'vue - lazyload';
const app = createApp(App);
app.use(VueLazyload);
app.mount('#app');

 - 在单文件组件的模板中使用懒加载。例如，有一个显示商品图片的组件：

<template>
    <div>
        <img v - lazy="productImageSrc" alt="Product Image">
    </div>
</template>
<script setup>
import { ref } from 'vue';
const productImageSrc = ref('https://example.com/product - image.jpg');
</script>

 - 在这里，`v - lazy`指令告诉`vue - lazyload`库只有当图片进入浏览器的可视区域时才加载`productImageSrc`对应的图片，这样可以避免一次性加载页面上所有的图片，尤其是在页面包含大量图片的情况下，能够显著提升页面的初始加载速度。

自定义懒加载指令（进阶）
- 如果不想依赖第三方库，也可以自定义懒加载指令。以下是一个简单的示例：

<template>
    <div>
        <img v - custom - lazy="productImageSrc" alt="Product Image">
    </div>
</template>
<script setup>
import { ref, onMounted, onUnmounted, Directive } from 'vue';
const productImageSrc = ref('https://example.com/product - image.jpg');
const lazyLoad = (el: HTMLElement, binding: any) => {
    const observer = new IntersectionObserver((entries) => {
        if (entries[0].isIntersecting) {
            const img = new Image();
            img.src = binding.value;
            img.onload = () => {
                el.src = binding.value;
            };
            observer.unobserve(el);
        }
    });
    observer.observe(el);
};
const customLazyDirective: Directive = {
    mounted: lazyLoad,
    updated: lazyLoad
};
app.directive('custom - lazy', customLazyDirective);
</script>

 - 在这个示例中，定义了一个名为`v - custom - lazy`的自定义指令。在`lazyLoad`函数中，使用`IntersectionObserver`来监测图片元素是否进入可视区域。当进入可视区域时，创建一个新的`Image`对象，设置其`src`为绑定的图片源，在图片加载完成后（`onload`事件），将图片元素的`src`设置为绑定的图片源，然后停止观察。这个自定义指令可以像`vue - lazyload`库的指令一样实现图片懒加载功能。

响应式图片尺寸调整
- 使用srcset和sizes属性
  - 在移动端设备上，屏幕尺寸和分辨率多种多样。为了提供最佳的视觉体验并减少不必要的带宽消耗，可以使用srcset和sizes属性来提供多尺寸的图片，并根据设备的屏幕尺寸和分辨率来加载最合适的图片。例如，在一个单文件组件的图片元素中：

<template>
    <div>
        <img
            src="small - image.jpg"
            srcset="small - image.jpg 320w, medium - image.jpg 640w, large - image.jpg 1024w"
            sizes="(max - width: 320px) 320px, (max - width: 640px) 640px, 1024px"
            alt="Responsive Image"
        >
    </div>
</template>

 - 在这个例子中，`src`属性提供了一个默认的小尺寸图片。`srcset`属性定义了不同尺寸的图片及其对应的宽度（以`w`单位表示），`sizes`属性则根据设备的屏幕宽度来指定应该选择哪个图片。例如，当设备屏幕宽度小于等于320px时，选择`320w`对应的`small - image.jpg`；当屏幕宽度在321px到640px之间时，选择`640w`对应的`medium - image.jpg`等。这样可以确保在不同尺寸的移动端设备上加载合适大小的图片，提高加载速度和显示效果。

结合CSS媒体查询动态调整图片尺寸
- 除了使用srcset和sizes属性，还可以通过CSS媒体查询来动态调整图片的显示尺寸。例如，在单文件组件的样式部分：

<template>
    <div class="image - container">
        <img src="image.jpg" alt="Image">
    </div>
</template>
<style scoped>
.image - container img {
    width: 100%;
    height: auto;
}
@media (min - width: 600px) {
   .image - container img {
        width: 50%;
    }
}
</style>

 - 在这个例子中，图片在屏幕宽度小于600px时，宽度会自动填充容器（`width: 100%`）；当屏幕宽度大于等于600px时，图片宽度会调整为容器宽度的50%。这种方式可以根据设备的屏幕尺寸动态地调整图片的显示大小，同时保持图片的比例，避免图片在小屏幕设备上过大或者在大屏幕设备上过小的问题。