vue项目打包压缩图片插件image-minimizer-webpack-plugin，你真的会用了吗？

开发场景，vue项目里面中有大量的图片，因此想项目打包前可以对项目中的图片进行一次无损压缩，找了不少插件，发现image-minimizer-webpack-plugin还是可以使用的。

但是呢，也发现了个问题，这个库并不好下载，经常会npm下载失败。

因此我们可以用淘宝源`--registry=https://registry.npm.taobao.org`的方式下载。总之有办法能把这些库都下载下来就行了

下载命令：

npm install image-minimizer-webpack-plugin imagemin -D
npm install imagemin-gifsicle imagemin-jpegtran imagemin-optipng imagemin-svgo -D

这些插件（无损压缩）都是必要下载的，但是这些插件都很容易下载失败，就算下载成功了，也会发现执行命令后依然会报错缺了某个exe程序。其实就是还有这三个库（压缩对应的图片格式）里面缺了exe程序。

optipng-bin
jpegtran
gifsicle

如果npm都下不下来的话，那么就要手动把exe程序按照对应的文件夹放进去了，不然打包以依然会报错缺少.exe程序。

optipng.exe 下载 optipng.exe 放到 node_modules\optipng-bin\vendor\

jpegtran.exe 下载 jpegtran.exe 放到 node_modules\jpegtran-bin\vendor\

gifsicle.exe 下载 gifsicle.exe 放到node_modules\gifsicle\vendor\

附上图片好理解~

上面的库都准备好了，下面就是配置的事儿啦~

下面就是一份最详细的使用方法了

package.json

...（省略部分无关代码）
devDependencies: {
    "image-minimizer-webpack-plugin": "^3.8.3",
    "imagemin": "^8.0.1",
    "imagemin-gifsicle": "^7.0.0",
    "imagemin-jpegtran": "^7.0.0",
    "imagemin-optipng": "^8.0.0",
    "imagemin-svgo": "^10.0.1",
}
...

vue.config.js

const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");
...（省略部分无关代码）
    configureWebpack: config => {
        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" }],
                      },
                    },
                  ],
                },
                ],
              ],
            },
          },
        }),
    }
...

最后就是执行`npm run build` 就是打包前压缩图片啦！