Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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
}
like image 312
prk_001 Avatar asked Oct 28 '25 14:10

prk_001


2 Answers

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

like image 124
Ankit Avatar answered Oct 31 '25 06:10

Ankit


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

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.

like image 38
prk_001 Avatar answered Oct 31 '25 05:10

prk_001



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!