react umi 图片压缩

在使用React Umi进行图片压缩时，可以通过配置webpack.config.js文件来实现。首先，确保已经安装了image-webpack-loader插件。如果安装失败，可以尝试使用cnpm安装，具体步骤如下：

1. 首先，卸载image-webpack-loader插件，可以使用以下命令：
yarn remove image-webpack-loader
npm uninstall image-webpack-loader

2. 更换镜像源，可以使用以下命令安装cnpm：
npm install cnpm -g --registry=https://registry.npm.taobao.org

3. 使用cnpm安装image-webpack-loader插件：
cnpm install --save-dev image-webpack-loader

安装完成后，打开webpack.config.js文件，在配置项中添加以下内容：

{
  test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
  use: [
    {
      loader: 'file-loader',
      options: {
        name: '[name].[hash:7].[ext]',
        outputPath: 'mobile/img'
      }
    },
    {
      loader: 'image-webpack-loader',
      options: {
        mozjpeg: {
          progressive: true,
          quality: 50
        },
        optipng: {
          enabled: false
        },
        pngquant: {
          quality: [0.5, 0.65],
          speed: 4
        },
        gifsicle: {
          interlaced: false
        }
      }
    }
  ]
}

在这个配置中，可以根据自己的需求调整图片压缩的质量。通过设置mozjpeg的quality参数，可以控制JPEG图片的压缩质量。同时，设置pngquant的quality参数，可以控制PNG图片的压缩质量。

请确保在配置完成后，运行yarn build进行打包。经过压缩后，图片的大小可能会减小，但也可能会导致图片稍微模糊。根据实际情况，可以自行调整压缩的质量来平衡图片大小和清晰度。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [react打包压缩js\css\img](https://blog.csdn.net/qq_41359066/article/details/107507264)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]