技術標籤：vuevue.js前端webpack

圖片壓縮外掛：image-webpack-loader
安裝：cnpm install --save-dev image-webpack-loader
npm地址：https://www.npmjs.com/package/image-webpack-loader

vue-cli4的預設圖片處理配置：

   webpackConfig.module
      .rule('images')
        .test(/\.(png|jpe?g|gif|webp)(\?.*)?$/)
        .use('url-loader')
          .loader(
 
require.resolve('url-loader'))
          .options(genUrlLoaderOptions('img'))

很多人直接這樣在vue.config.js裡面加image-webpack-loader 配置，如下：

chainWebpack(webpackConfig) {
    // 壓縮圖片
    webpackConfig.module
      .rule('images')
      .use('image-webpack-loader')
      .loader('image-webpack-loader')
      .options(
 
{ bypassOnDebug: true })
      .end()
}

這是錯誤的做法。

正確的做法如下：

image-webpack-plugin的npm官網上的例子：

rules: [{
  test: /\.(gif|png|jpe?g|svg)$/i,
  use: [
    'file-loader',
    {
      loader: 'image-webpack-loader',
      options: {
        bypassOnDebug: true, // [email protected]
        disable: true, // [email protected]
 
 and newer
      },
    },
  ],
}]

很明確告訴我們是要配合file-loader外掛來使用，而且file-loader外掛是要放在image-webpack-loader之前。

vue-clie4的vue.config.js下的image-webpack-loader正確配置

如下：

if (isProd) {
      // 圖片壓縮
      webpackConfig.module
        .rule('images')
        .test(/\.(gif|png|jpe?g|svg)$/i)
        .use('file-loader')
        .loader('file-loader')
        .options({
          name: '[name].[hash:7].[ext]',
          outputPath: 'img'
        })
        .end()
        .use('image-webpack-loader')
        .loader('image-webpack-loader')
        .options({
          mozjpeg: {
            progressive: true,
            quality: 50
          },
          optipng: {
            enabled: true,
          },
          pngquant: {
            quality: [0.5, 0.65],
            speed: 4
          },
          gifsicle: {
            interlaced: false,
          },
          // 不支援WEBP就不要寫這一項
          webp: {
            quality: 75
          }
        })
        .end()
    }

親自測試過，可以把6.68k的圖片壓成2.11k。成功壓縮圖片。