当前位置： 移动技术网 > IT编程>开发语言>JavaScript > react打包压缩jscssimg

react打包压缩jscssimg

2020年07月24日  | 移动技术网IT编程  | 我要评论

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

开启gzip压缩

  1. js/css使用插件 compression-webpack-plugin压缩
 yarn add compression-webpack-plugin -S //npm install compression-webpack-plugin --save-dev
  1. 配置webpack.config
    打开config文件夹下的webpack.config.js,在module.exports前引入compression-webpack-plugin

    在这里插入图片描述
const CompressionPlugin = require("compression-webpack-plugin"); //copy这里
  1. 添加配置项，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兆，但是图片稍微模糊了，这个可以自己调整压缩的质量，全部亲测有效可行。希望你也可以成功。

本文地址：https://blog.csdn.net/qq_41359066/article/details/107507264

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网