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
}
