react打包压缩js\css\img

前言
本文基于 “react”: “^16.13.1”,“webpack”: “4.42.0”,“antd”: “^4.4.0”,同时借鉴了其他博主的文章，只为做个记录，下次好参考，原文链接在这里 ：https://blog.youkuaiyun.com/weixin_43233914/article/details/106789577, 原文连接在这里：https://blog.youkuaiyun.com/lsvtogergo/article/details/81348934。

开启gzip压缩

1. js/css使用插件 compression-webpack-plugin压缩

 yarn add compression-webpack-plugin -S //npm install compression-webpack-plugin --save-dev

2. 配置webpack.config
   打开config文件夹下的webpack.config.js,在module.exports前引入compression-webpack-plugin
   
   

const CompressionPlugin = require("compression-webpack-plugin"); //copy这里

3. 添加配置项，ctrl+f 搜索 HtmlWebpackPlugin，在其上方添加如下配置项
   

//copy这里 // compression-webpack-plugin 因为版本问题，2.x将 asset 改为了 filename
new CompressionPlugin({
        filename: '[path].gz[query]', // 目标资源名称。[file] 会被替换成原资源。[path] 会被替换成原资源路径，[query] 替换成原查询字符串
        algorithm: 'gzip', // 算法       
        test: new RegExp('\\.(js|css)$'), // 压缩 js 与 css
        threshold: 10240, // 只处理比这个值大的资源。按字节计算
        minRatio: 0.8 // 只有压缩率比这个值小的资源才会被处理
      }),

使用image-webpack-loader压缩图片

1. 下载安装image-webpack-loader

yarn add image-webpack-loader -S //npm i image-webpack-loader -S

安装失败看这里

• 先卸载

yarn remove image-webpack-loader   // npm uninstall image-webpack-loader

• 换镜像源

npm install cnpm -g --registry=https://registry.npm.taobao.org

• cnpm安装

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 will disable optipng
            optipng: {
              enabled: false,
            },
            pngquant: {
              quality: [0.5, 0.65],
              speed: 4
            },
            gifsicle: {
              interlaced: false,
            },
            //ios不支持
            // webp: {
            //   quality: 100
            // }
          }
        }
      ]
    },

然后终端运行 yarn build 打包，我的50多兆压缩后只有18兆，但是图片稍微模糊了，这个可以自己调整压缩的质量，全部亲测有效可行。希望你也可以成功。