将 Imagemin 与 webpack 结合使用

凯蒂·亨佩纽斯
Katie Hempenius
X

设置 Imagemin Webpack 插件

此 Glitch 已包含 webpack、webpack-cli 和 imagemin-webpack-plugin。如需为 Imagemin 添加配置，您需要修改 webpack.config.js 文件。

此项目的现有 webpack.config.js 已将图片从 images/ 目录复制到 dist/ 目录，但尚未对其进行压缩。

  • 点击 Remix to Edit 使项目可修改。
  • 首先，在 webpack.config.js 顶部添加以下代码，以声明 Imagemin 插件：
const ImageminPlugin = require('imagemin-webpack-plugin').default;
  • 接下来，将以下代码添加为 plugins[] 数组中的最后一项。这会将 Imagemin 添加到 Webpack 使用的插件列表中：
new ImageminPlugin()

✔︎ 入住

完整的 webpack.config.js 文件现在应如下所示：

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

module.exports = {
  entry: './index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
     new CopyWebpackPlugin([{
       from: 'img/**/**',
       to: path.resolve(__dirname, 'dist')
     }]),
     new ImageminPlugin()
  ]
}

现在，您已经有一个使用 Imagemin 压缩图片的 webpack 配置。

运行 webpack

  • 点击终端（注意：如果“终端”按钮未显示，您可能需要使用“全屏”选项）。
  • 如需压缩图片，请在控制台中输入以下命令来运行 Webpack：
webpack --config webpack.config.js --mode development

但是，如果在生产模式下运行 webpack，会发生什么情况呢？

  • 重新运行 webpack，但这次在生产模式下：
webpack --config webpack.config.js --mode production

这一次，webpack 会显示一条警告，告知您 PNG 文件尽管进行了一些压缩，但仍超过了建议的大小限制。（webpack 的 development 和 production 模式会优先处理不同的内容，因此在生产模式下运行 webpack 时，你只会看到此警告。）

自定义 Imagemin 配置以修复此警告。

自定义 Imagemin 配置

通过将以下对象传递给 ImageminPlugin()，添加用于压缩 PNG 图片的设置：

{pngquant: ({quality: [0.5, 0.5]})}

此代码会告知 Imagemin 使用 Pngquant 插件压缩 PNG。quality 字段使用 min 和 max 值范围来确定压缩级别 - 0 是最低压缩级别，1 是最高压缩级别。如需强制所有图片以 50% 质量压缩，请将 0.5 同时作为最小值和最大值传递。

✔︎ 入住

您的 webpack.config.js 文件现在应如下所示：

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

module.exports = {
  entry: './index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new CopyWebpackPlugin([{
        from: 'img/**/**',
        to: path.resolve(__dirname, 'dist')
    }]),
    new ImageminPlugin({
      pngquant: ({quality: [0.5, 0.5]}),
      })
  ]
}

那么 JPEG 呢？此项目还包含 JPEG 图片，因此您还应指定这些图片的压缩方式。

自定义 Imagemin 配置（续）

请使用 imagemin-mozjpeg 插件，而不要使用 imagemin-webpack-plugin 的默认 JPG 压缩插件 (imagemin-jpegtran)。与 Jpegtran 不同的是，Mozjpeg 可让您为 JPG 压缩指定压缩质量。我们已在此 Glitch 中为您安装 Mozjpeg 插件，但您需要修改 webpack.config.js 文件：

  • 在 webpack.config.js 文件顶部添加以下代码行，以初始化 imagemin-mozjpeg 插件：
const imageminMozjpeg = require('imagemin-mozjpeg');
  • 向传递给 ImageminPlugin() 的对象添加 plugins 属性，使对象现在如下所示：
new ImageminPlugin({
  pngquant: ({quality: [0.5, 0.5]}),
  plugins: [imageminMozjpeg({quality: 50})]
})

此代码会告知 Webpack 使用 Mozjpeg 插件将 JPG 文件压缩至 50（最差；100 表示最佳）质量。

如果您要为 imagemin-webpack-plugin 的默认插件添加设置，则可以将这些设置作为键-对象对添加到传递给 ImageminPlugin() 的对象上。Pnquant 的设置就是一个很好的例子。

不过，如果您要为非默认插件（例如 Mozjpeg）添加设置，则应将它们添加到与 plugins 属性对应的数组中。

✔︎ 入住

现在，您的代码应如下所示：

const imageminMozjpeg = require('imagemin-mozjpeg');
const ImageminPlugin = require('imagemin-webpack-plugin').default;
const CopyWebpackPlugin = require('copy-webpack-plugin');
const path = require('path');

module.exports = {
  entry: './index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new CopyWebpackPlugin([{
      from: 'img/**/**',
      to: path.resolve(__dirname, 'dist')
    }]),
    new ImageminPlugin({
      pngquant: ({quality: [0.5, 0.5]}),
      plugins: [imageminMozjpeg({quality: 50})]
    })
  ]
}

重新运行 webpack 并使用 Lighthouse 验证结果

  • 在控制台中，重新运行 webpack：
webpack --config webpack.config.js --mode production

太棒了！您所做的更改应该已解决 webpack 警告问题。

webpack 会对大型图片发出警告，但它无法判断图片是未压缩还是未压缩。因此，最好使用 Lighthouse 来验证您所做的更改。

借助 Lighthouse 的“对图片高效编码”性能审核，您可以了解网页上的 JPEG 图片是否经过了最佳压缩。

  • 如需预览网站，请按查看应用，然后按全屏 全屏。
  • 对当前版本的 Glitch 运行 Lighthouse 性能审核（Lighthouse > 选项 > 性能），并验证是否已通过高效编码图片审核。

通过了 Lighthouse 中的“高效编码图片”审核

成功！您已使用 Imagemin 以最佳方式压缩网页上的图片。