My react-admin bundle size is huge (860KB) - reactjs

Question

I already tried to configure various different optimization methods, but my react-admin bundle size stays huge, at 860KB.
What can I do about it? Is it normal? What can be a possible cause? I will post links with my webpack configs in a minute.
I don't think there's any clever way to do code-splitting for now. I have implemented few resources and they should always be used kind of together.
Link to my common webpack config:
https://pastebin.com/t6uMWiJ6
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
main: './src/components/index.js'
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'static/js/[name].[contenthash:8].js'
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
loader: 'babel-loader',
options: {
cacheDirectory: true,
cacheCompression: false,
babelrc: true
}
},
{ test: /\.json$/, loader: 'json-loader' },
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
exclude: [/\.(js|jsx)$/, /.html$/, /.css$/, /.json$/],
loader: 'file-loader',
options: {
name: 'static/media/[name].[contenthash:8].[ext]'
}
}
]
},
resolve: {
unsafeCache: true,
extensions: ['.js', '.jsx', '.json', '.css'],
alias: {
actions: path.resolve(__dirname, './src/actions'),
reducers: path.resolve(__dirname, './src/reducers'),
components: path.resolve(__dirname, './src/components'),
lib: path.resolve(__dirname, './src/components/_lib'),
styles: path.resolve(__dirname, './src/styles'),
config: path.resolve(__dirname, './src/config')
}
},
plugins: [
new HtmlWebpackPlugin({
template: './src/public/index.html',
favicon: './src/public/favicon.ico'
}),
new webpack.PrefetchPlugin('react'),
new webpack.PrefetchPlugin('react-dom')
],
optimization: {
usedExports: true
}
};
Here are my dependencies
{
"dependencies": {
"#babel/runtime": "^7.9.2",
"#material-ui/core": "^4.9.13",
"#material-ui/icons": "^4.9.1",
"#material-ui/pickers": "next",
"connected-react-router": "^6.8.0",
"final-form": "^4.19.1",
"jwt-decode": "^2.2.0",
"moment": "^2.25.3",
"prop-types": "^15.7.2",
"ra-core": "^3.5.0",
"ra-data-simple-rest": "^3.2.2",
"react": "^16.12.0",
"react-admin": "^3.1.1",
"react-dom": "^16.12.0",
"react-final-form": "^6.4.0",
"react-redux": "^7.2.0",
"react-router": "^5.1.2",
"react-router-dom": "^5.1.2",
"redux": "^4.0.5",
"redux-saga": "^1.1.3"
},
"devDependencies": {
"#babel/core": "^7.9.6",
"#babel/plugin-syntax-dynamic-import": "^7.8.3",
"#babel/plugin-transform-runtime": "^7.9.0",
"#babel/preset-env": "^7.9.5",
"#babel/preset-react": "^7.9.4",
"babel-loader": "^8.1.0",
"css-loader": "^3.5.2",
"file-loader": "^6.0.0",
"html-webpack-plugin": "^4.3.0",
"style-loader": "^1.2.1",
"webpack": "next",
"webpack-bundle-analyzer": "^3.7.0",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.11.0",
"webpack-manifest-plugin": "^2.2.0",
"webpack-merge": "^4.2.2"
},
"peerDependencies": {
"history": "^4.10.1",
"immutable": "^4.0.0-rc.12",
"seamless-immutable": "^73.1.4"
},
"sideEffects": [
"*.css"
]
}

Answer 1

Tree shaking is probably what you need to look at. See https://webpack.js.org/guides/tree-shaking/
Note, as they say above, the way you import your modules in your source code is lso important here.
In essence though, it should enable webpack to just bundle the parts of npm packages that are needed.