压缩图片：使用 Vue CLI 和 Imagemin-Webpack-Plugin，让你事半功倍！

2024-01-13 01:51:30

为什么要压缩图片？

在现代网络应用中，图片占据了相当大的体积，这可能会导致页面加载缓慢并影响用户体验。为了解决这个问题，图片压缩应运而生。图片压缩是指通过减少图片文件的大小来提高其加载速度。这可以通过多种方式实现，例如调整图片尺寸、降低图片质量、使用更有效的图片格式等。

Vue CLI 和 Imagemin-Webpack-Plugin

Vue CLI 是一个用于构建 Vue.js 项目的命令行工具，它提供了创建、构建和管理 Vue 项目所需的各种功能。Imagemin-Webpack-Plugin 是一个 Webpack 插件，它允许您在构建过程中压缩图片。通过将 Imagemin-Webpack-Plugin 集成到您的 Vue 项目中，您可以轻松地实现图片压缩，从而提升应用程序的性能。

配置 Imagemin-Webpack-Plugin

首先，您需要将 Imagemin-Webpack-Plugin 安装到您的项目中。您可以通过以下命令来安装它：

npm install --save-dev imagemin-webpack-plugin

安装完成后，您需要在 vue.config.js 文件中配置 Imagemin-Webpack-Plugin。在此文件中，您需要添加以下代码：

const ImageminPlugin = require('imagemin-webpack-plugin').default;

module.exports = {
  chainWebpack: (config) => {
    config.plugin('imagemin').use(ImageminPlugin, [
      {
        test: /\.(jpe?g|png|gif|svg)$/i,
        // 这里可以使用imagemin的options参数来配置压缩的参数
        // https://github.com/imagemin/imagemin#options
        options: {
          // 压缩 jpg/png 图片
          plugins: [
            ['imagemin-mozjpeg', { quality: 80 }],
            ['imagemin-pngquant', { quality: [0.65, 0.80] }],
          ],
        },
      },
    ]);
  },
};

使用 Imagemin-Webpack-Plugin

配置完成后，您就可以在您的 Vue 项目中使用 Imagemin-Webpack-Plugin 来压缩图片了。您可以在您的代码中使用以下代码来导入图片：

import myImage from './path/to/image.jpg';

然后，您可以在您的组件中使用 myImage 变量来显示图片。当您构建您的项目时，Imagemin-Webpack-Plugin 会自动压缩 myImage 图片，并将其输出到您的构建目录中。

技巧和建议

使用更有效的图片格式：JPEG 和 PNG 是两种最常用的图片格式，但它们并不是唯一的选择。您可以使用一些更有效的图片格式，例如 WebP 和 AVIF，来进一步减小图片的大小。
使用 CDN 来分发图片：CDN 可以帮助您更快地将图片分发给用户，从而提高页面加载速度。您可以使用一些流行的 CDN 服务，例如 Cloudflare 和 Amazon CloudFront，来分发您的图片。
延迟加载图片：延迟加载图片可以帮助您减少初始页面加载时间。您可以使用一些 JavaScript 库，例如 Lazysizes 和 Lozad，来实现图片的延迟加载。