Code spliting with dynamic imports still create big files - node.js

Question

I'm trying to make a production version about my client side code to deploy later in AWS. When I compile and build my web application in development enviromet, everything works fine. But when I try to do it in production enviroment I've got a warning because I've got files bigger than 244KB.
To fix this problem, I have been following the indications of Dynamic Imports But, how you can see in this screen cap, I'm still getting a file very big:
My application use Node.js, React.js and webpack 4. This is my package.json
{
"name": "basketmetrics3",
"version": "1.0.0",
"description": "Basketball advanced stats",
"main": "server.js",
"scripts": {
"dev-webpack": "webpack-dev-server --hot --mode development",
"clean": "rm -rf ./dist",
"dev": "npm run build-dev && cross-env NODE_ENV=development nodemon --exec babel-node src/server/server.js --ignore ./src/client",
"build-dev": "npm run clean && npm run compile-dev",
"compile-dev": "NODE_ENV=development webpack -d --config ./webpack.config.babel.js --progress",
"compile": "NODE_ENV=production webpack -p --config ./webpack.config.babel.js --progress",
"build": "npm run clean && npm run compile",
"start": "npm run build && node ./dist/assets/js/main.bundle.js",
"heroku-postbuild": "webpack -p"
},
"dependencies": {
"#babel/polyfill": "^7.4.4",
"#material-ui/core": "^3.9.3",
"#material-ui/icons": "^3.0.2",
"bootstrap": "^4.3.1",
"cors": "^2.8.5",
"create-react-app": "^3.0.1",
"cross-env": "^5.2.0",
"d3": "^5.9.7",
"dotenv": "^7.0.0",
"express": "^4.17.1",
"express-graphql": "^0.7.1",
"graphql": "^14.4.2",
"jquery": "^3.4.1",
"morgan": "^1.9.1",
"mysql2": "^1.6.5",
"popper.js": "^1.15.0",
"react": "^16.8.6",
"react-bootstrap": "^1.0.0-beta.10",
"react-bootstrap-table-next": "^3.1.7",
"react-bootstrap-table2-paginator": "^2.0.7",
"react-dom": "^16.8.6",
"react-multi-language": "^0.4.2",
"react-router-dom": "^5.0.1",
"react-simple-tooltip": "^2.6.1",
"sequelize": "^4.44.2",
"validator": "^10.11.0"
},
"devDependencies": {
"#babel/cli": "^7.5.5",
"#babel/core": "^7.5.5",
"#babel/node": "^7.5.5",
"#babel/preset-env": "^7.5.5",
"#babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.6",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-register": "^6.26.0",
"css-loader": "^2.1.1",
"file-loader": "^3.0.1",
"html-webpack-plugin": "^3.2.0",
"mini-css-extract-plugin": "^0.5.0",
"nodemon": "^1.19.1",
"path": "^0.12.7",
"style-loader": "^0.23.1",
"url-loader": "^1.1.2",
"webpack": "^4.38.0",
"webpack-cli": "^3.3.6",
"webpack-dev-server": "^3.7.2"
}
}
To run my application in development enviroment I do it with this command: npm run dev and to run my application in production environment I do it with npm run start.
And this is my webpack.config.babel.js:
import path from "path";
import HtmlWebpackPlugin from "html-webpack-plugin";
import MiniCssExtractPlugin from "mini-css-extract-plugin";
const devMode = process.env.NODE_ENV !== "production";
console.log("devMode: " + devMode);
module.exports = {
entry: "./src/client/index.js", //set entry file
// Resolve to output directory and set file
output: {
path: path.resolve("dist/assets"),
filename: "js/[name].bundle.js",
chunkFilename: "js/[name].bundle.js",
publicPath: "/assets" //It's mandatory to define this publicPath to get access to the website when we reload pages
//or we access to them directly with url's which have directories of second level like
//http://localhost:4000/directory-level-1/directory-level-2
},
plugins: [
new HtmlWebpackPlugin({
template: "./src/client/index.html", //where is our template
filename: "../index.html", //where we are going to put our index.html inside the output directory
minify: {
collapseWhitespace: true,
removeComments: true,
removeRedundantAttributes: true,
removeScriptTypeAttributes: true,
removeStyleLinkTypeAttributes: true,
useShortDoctype: true
}
}),
new MiniCssExtractPlugin({
filename: "css/bundle.css",
minify: {
collapseWhitespace: true,
removeComments: true,
removeRedundantAttributes: true,
removeScriptTypeAttributes: true,
removeStyleLinkTypeAttributes: true,
useShortDoctype: true
}
})
],
//It help us to detect errors.
devtool: "source-map",
// Set dev-server configuration
devServer: {
inline: true,
contentBase: './dist',
port: 3000
},
// Add babel-loader to transpile js and jsx files
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use:[
{
loader: "babel-loader",
query: {
presets: [
"#babel/preset-react"
]
}
}
]
},
{
use: [
devMode ? "style-loader" : MiniCssExtractPlugin.loader,
"css-loader"],
test: /\.css$/
},
{
test: /\.scss$/,
use: [
{
loader: "style-loader"
},
{
loader: "css-loader",
options: {
sourceMap: true
}
},
{
loader: "saas-loader",
options: {
sourceMap: true
}
}
]
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: "url-loader",
options: {
limit: 10000,
publicPath: "/assets/images/",
outputPath: "./images/"
}
},
{
test: /\.(eot|ttf|woff|woff2)$/,
loader: "url-loader",
options: {
limit: 10000,
publicPath: "/assets/fonts/", //It's mandatory to get access to the fonts when we reload pages or access directly
outputPath: "./fonts/"
}
}
]
}
}
How can I split my code in files smaller than the file that I've got in this moment?
Edit I (solved):
One possible solution to split the client code in files with a size smaller than 244Kb could be adding this entry to webpack.config.babel.js file:
optimization: {
splitChunks : {
chunks: "all",
minSize: 30000,
maxSize: 100000,
}
},
Now, I've got several files with a size smaller than 100Kb. Any other option to do the same?