1

I am new to react programming.I finished my project and i am trying to understand build optimisation techniques. My application contains graphs,antd,redux libraries. After finishing my project i executed npm run build and npm run analyze, bundle combined size is showing 3MB. I searched in internet using webpack we can reduce size of the build then i added webpack.config.js to my project and i executed webpack --mode=production, bundle.js size is showing 5MB. I am not understanding which approach i should use.

webpack.config.js:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const withReport = process.env.npm_config_withReport
module.exports = {

    // webpack will take the files from ./src/index
    entry: './src/index',

    // and output it into /dist as bundle.js
    output: {
        path: path.join(__dirname, 'build'),
        filename: 'bundle.js',
        publicPath: '/'
    },

    devServer: {
        contentBase: path.join(__dirname, 'output'),
        compress: true,
        port: 3000,
        historyApiFallback: true,
        publicPath: '/'
    },

    // adding .ts and .tsx to resolve.extensions will help babel look for .ts and .tsx files to transpile
    resolve: {
        extensions: ['.ts', '.tsx', '.js']
    },

    module: {
        rules: [

            // we use babel-loader to load our jsx and tsx files
            {
                test: /\.(ts|js)x?$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader'
                },
            },

            // css-loader to bundle all the css files into one file and style-loader to add all the styles  inside the style tag of the document
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ico)$/,
                exclude: /node_modules/,
                loader: "file-loader"
            },
            {
                test: /\.scss$/,
                loaders: ["style-loader", "css-loader", "sass-loader"]
            }

        ]
    },plugins: [
        new HtmlWebpackPlugin({
            template: path.resolve( __dirname, 'public/index.html' ),
            filename: 'index.html',
            favicon: "./public/appicon.png",
            manifest: "./public/manifest.json"
        }),
        withReport ? new BundleAnalyzerPlugin() : '',
    ],
    optimization: {
        usedExports: true
    }
};

npm run build ===> first approach. ==>. 3 MB "build": "webpack --mode=production", ===> second approach ==> 5.2 MB

skyshine
  • 2,767
  • 7
  • 44
  • 84
  • how you have created react project? using create-react-app ? if yes then your project is using webpack to make build – Abhay Sehgal Sep 23 '20 at 12:10
  • i created project using create-react-app but if i want to add more compressing like adding gzip in that case i need external webpack configuration as per my knowledge. if i create project with create-react-app internally node modules contains webpack. – skyshine Sep 23 '20 at 12:44
  • Yes, in that case you've to eject webpack config files or you can check this question - https://stackoverflow.com/questions/55704772/how-to-compress-build-with-without-ejecting-create-react-app-also-include-compr – Abhay Sehgal Sep 23 '20 at 12:50

1 Answers1

0

Install gzipper package (https://www.npmjs.com/package/gzipper). Modify build command like this

"build": "react-scripts build && gzipper compress --verbose ./build"

and build your project you will get both gzip and regular file. It is upto you to make server to serve gzip instead of regular file. If you are using nginx you have to setup your server in nginx.conf file as below

server {
        # Gzip Settings
        gzip on;
        gzip_static on; # allows pre-serving of .gz file if it exists 
        gzip_disable "msie6"; # Disable for user-agent Internet explorer 6. Not supported.
        gzip_proxied any; # enable gzip for all proxied requests
        gzip_buffers 16 8k; # number and size of buffers to compress a response
        gzip_http_version 1.1;
        gzip_min_length 256; # Only gzip files of size in bytes
        gzip_types text/plain text/css text/html application/javascript application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript application/vnd.ms-fontobject application/x-font-ttf font/opentype image/svg+xml image/x-icon;
        gunzip on; # Uncompress on the fly
        listen       4000;
        server_name  localhost;



        location / {
            root   html/react-app;
            index  index.html index.htm;
        }


        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }


    }

Alternatively You can add post build compression to your create-react-app build with minimal configuration using compress-create-react-app. It compresses all html, css and javascript files in the build folder using brotli and gzip algorithms.

First install it as dev dependency:

npm install compress-create-react-app --save-dev

Then edit the build command in your package.json:

 "scripts": {
    "start": "react-scripts start",
-   "build": "react-scripts build",
+   "build": "react-scripts build && compress-cra",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }
aweSAM
  • 26
  • 6