CODEWITHSUNDEEP
reactjswebpackgzip
skyshine
skyshine

Reputation: 2864

How to add gzip to react app with create-react-app command

I am new to react programming. I created a react app with create-react-app command. For generating build i am running npm run build command(react-scripts build). Build size of my application is 2.5 MB, i wanted to reduce the app size. I looked in SO, found some people are using webpack and gzip plugins to reduce the app size. But if you generate react app with create-react-app command we can't see webpack configurations until and unless npm run eject. So is there any way to add gzip compression to my react web app.

Upvotes: 1

Views: 5566

Answers (1)

lissettdm
lissettdm

Reputation: 13078

Install compression-webpack-plugin

Add it in your webpack.config.js file

const CompressionPlugin = require('compression-webpack-plugin');
            
module.exports = function(webpackEnv) {
 ...
 return {
    plugins: [
        ...
        isEnvProduction && 
            new CompressionPlugin({
              algorithm: "gzip",
              test: /\.js$|\.css$|\.html$/,
              threshold: 10240,
              minRatio: 0.8
            }),
    ]
  }
}

Upvotes: 6

Related Questions