Empty minified React app, why is it already to big?

Question

I created a very basic app, that only loads json from url and then displays it. There are no chunks to split, things get minified, but I still get the message:

"WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB). This can impact web performance. Assets: output_react.js (245 KiB)".

The mode production is on (script is minified, during dev its over 1mb), app basically doesn't do anything and webpack already reports it as too big? Why? And how can I solve this? (style.scss is also empty, only 150 chars).

My code: App.js

import React, {Component} from 'react';
require('../styles/style.scss');

class App extends Component {
  constructor(){
    super();
    this.state = {
      orders : []
    }

      this.getOrders();
  }
  getOrders (){
    fetch('http://localhost/supplier/get_orders.php')
    .then(results =>{
      return results.json();
    }).then(data =>{
      let orders = data.orders.map((order) => {
        return( 
          <div key={order.order_index} className={order.status}>
            {order.sizes}
          </div>
        )
      })
      this.setState({orders: orders})
    })
  }
  render() {
    return  <div className="orders_container">{this.state.orders}</div> ;
  }
}

export default App;

My webpack.config.js:

const webpack = require('webpack')
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.join(__dirname, '/dist'),
        filename: 'output_react.js'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: [/node_modules/, /git/],
                use: {
                    loader: 'babel-loader'
                }
      },
            {
                test: /\.scss$/,
                exclude: /git/,
                use: [
                "style-loader", // creates style nodes from JS strings
                "css-loader", // translates CSS into CommonJS
                "sass-loader" // compiles Sass to CSS, using Node Sass by default
            ]
        },
            {
                test: /\.css$/,
                exclude: /git/,
                use: [
                  "style-loader", // creates style nodes from JS strings
                  "css-loader" // translates CSS into CommonJS
              ]
          }
    ]
    },
    plugins: [
    new HtmlWebpackPlugin({
            template: './src/index.html'
        })
  ],
    watch: true
}

Answer 1

Thank you @hazardous. I have done the stats.json, and this is what the webpack-bundle-analyser showed:

So it seems the bootstrap is the problem. I acctually thought this might be the reason, so I've removed only the import 'bootstrap/dist/css/bootstrap.min.css'; from my index.js and this only lowered the size by 40kb.

But now (once I see the bootstrap is the problem indeed) I've also removed the bootstrap from production dependencies (in npm's package.json) - after this it works like a charm, "only" 100 kb for a bundle.js, which is ok considering it includes all the React.

Thank you a lot @hazardous, your answer solved the problem.

Answer 2

Well, you have to divide the min file into chunks. Just go for lazy loading based on routes and divide it into chunks.