欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

react打包压缩jscssimg

程序员文章站 2022-03-04 13:08:33
前言本文基于 “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压缩js/css使用插件 co...

前言
本文基于 “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
    react打包压缩jscssimg
    react打包压缩jscssimg
const CompressionPlugin = require("compression-webpack-plugin"); //copy这里
  1. 添加配置项,ctrl+f 搜索 HtmlWebpackPlugin,在其上方添加如下配置项
    react打包压缩jscssimg
//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里面添加配置项
react打包压缩jscssimg

{
    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

相关标签: react