webpack图像压缩插件安装及使用

jsmask
5,296 阅读3分钟

这是我参与2022首次更文挑战的第3天，活动详情查看：2022首次更文挑战

介绍

相信很多刚入行的小伙伴在开发项目时，不止一次的用了很多本地图片资源，很多都是找线上或电脑软件的去压缩体积的，当然其实在webpack时就可以进行其压缩优化了，本期我们将介绍一种webpack图像压缩插件——image-minimizer-webpack-plugin，它就是用于使用imagemin来压缩所有图像。所以以后不要担心图像的大小了，现在它们是可以自动被优化/压缩的。

安装

# NPM
npm install --save-dev image-minimizer-webpack-plugin
# Yarn 
yarn add -D image-minimizer-webpack-plugin

使用

为了演示我们就简单做一个index.html，在其逻辑脚本为app.js中我们放了两张本地的图片，一个是png的，一个svg的。

// app.js
import "./assets/style.css"
const imgs = [require("./assets/01.png"),require("./assets/02.svg")];
imgs.forEach(src=>{
  let img = document.createElement("img");
  img.src = src;
  document.getElementById("app").appendChild(img)
})

1.png

然后我们执行yarn build命令去打包，记录一下这两张图片打包后的大小。

微信截图_20220119172403.png

接下来，正题就要开始了。

我们做之前要清楚，这个插件可以使用2个工具来优化/生成图像：

  1. imagemin：默认优化您的图像，因为它稳定且适用于所有类型的图像
  2. squoosh：在实验模式下使用.jpg, .jpeg, .png, .webp,.avif文件类型工作。

我们本次要使用的是imagemin，所以我们要预先装其插件内容，官方又给出了两种搭配：

  1. 推荐用于无损优化的 imagemin 插件：

    npm install imagemin-gifsicle imagemin-jpegtran imagemin-optipng imagemin-svgo --save-dev

  2. 推荐用于无损优化的 imagemin 插件：

    npm install imagemin-gifsicle imagemin-mozjpeg imagemin-pngquant imagemin-svgo --save-dev

其中imagemin-mozjpeg和imagemin-svgo可以配置为无损和有损模式。

安装完成后，我们执行以下操作：

// webpack.config.js
const TARGET = process.env.npm_lifecycle_event;
const optimization = {
  minimizer: []
}
if (TARGET.indexOf("build")!=-1) {
    const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");
    const imageMinimizerPlugin = new ImageMinimizerPlugin({
      minimizer: {
        implementation: ImageMinimizerPlugin.imageminMinify,  // 共有imageminMinify和squooshMinify两种模式
        options: {
          plugins: [
            ["gifsicle", { interlaced: true }],
            ["jpegtran", { progressive: true }],
            ["optipng", { optimizationLevel: 5 }],
            ["svgo", {
              plugins: [
                'preset-default',
                {
                  name: "removeViewBox",
                  active: false,
                },
                {
                  name: "addAttributesToSVGElement",
                  params: {
                    attributes: [{ xmlns: "http://www.w3.org/2000/svg" }],
                  },
                },
              ],
            },
            ],

          ],
        },
      },
    })
  optimization.minimizer.push(imageMinimizerPlugin)
}

module.exports = {
    // ...
    module: {
    	rules: [
            // ...
             {
                test: /\.(jpe?g|png|gif|svg)$/i,
                type: "asset",
              },
        ]
    },
    optimization  
    // ...
}

可以发现我们先通过process.env.npm_lifecycle_event拿到当前指令，如果是要执行打包命令的话。我们再去最终压缩才有意义（目前这个简单业务场景是这样的）。而且这个插件要放到optimization的minimizer里面。

值得注意的是上面的代码是svgo9以上的写法。如果svgo 9以下需要使用extendDefaultPlugins，如下：

// svgo 9 以下：
const { extendDefaultPlugins } = require("svgo");
["svgo",{
    plugins: extendDefaultPlugins([
    	// ...
    ])
}]

现在我们再执行一遍打包，就会发现目录如下：

微信截图_20220119172459.png

振奋人心的时刻到了，刚刚还1.5mb的png变成1mb了，而且svg也小了4kb。当然目前是无损压缩，如果想要更小，可以手动改成有损的数值。

2.png

吐槽

但是说实话，如果做简单的页面应用其实webpack自动压缩图片是可以的，如果本地图片非常多且非常大其实并不合适让其自动压缩，因为太太耗时了！！！

还有imagemin-jpegtran和imagemin-gifsicle这俩插件，有时候还下载不下来，改hosts配置，科学上网有时候都没用，可有时候一遍就成，方了方了。。

结语

我们今天简单介绍和使用了一下image-minimizer-webpack-plugin这个插件，如果你想自己搭建一套脚手架自动处理一些本地图像可以考虑它。当然今天只是一些皮毛，还用更多的一些配置和使用方法等待你的发掘，比如过滤等，你可以进入其image-minimizer-webpack-plugin仓库里自行发掘。

avatar
文章
阅读
粉丝