将 Imagemin 与 webpack 结合使用

Katie Hempenius
Katie Hempenius

此 Glitch 已经包含 webpackwebpack-cliimagemin-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 的 developmentproduction 模式会优先处理不同的事项,因此您只有在生产模式下运行 webpack 时才会看到此警告。)

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

自定义 Imagemin 配置

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

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

此代码会指示 Imagemin 使用 Pngquant 插件压缩 PNG 文件。quality 字段使用 minmax 范围的值来确定压缩级别,其中 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(0 为最差;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 图片是否经过了最佳压缩。

  • 如需预览网站,请按 View App(查看应用)。然后按 Fullscreen(全屏)全屏
  • 对 Glitch 的正式版运行 Lighthouse 性能审核(依次选择 Lighthouse > Options > Performance),并验证是否通过了高效编码图片审核。

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

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