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

Question

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.

Answer 1

Install compression-webpack-plugin

In webpack.config.js

       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
                    }),
            ]
         }
        }