I am facing an issue with my React project where the production build size of the main.xxxx.js file is too large (19.3 MB) and I need to reduce it.
After researching online, I found out that analyzing the build files is the first step to identify the code contributing to the size, so I decided to use source-map-explorer.
This is what I discovered from the analysis (relevant section cropped for clarity):
https://i.stack.imgur.com/k2RW7.png
Surprisingly, the objectWithoutPropertiesLoose.js file makes up 86% of the build size. However, upon checking the file in the node_modules folder, it's only 1KB in size with minimal content:
export default function _objectWithoutPropertiesLoose(source, excluded) {
if (source == null) return {};
var target = {};
var sourceKeys = Object.keys(source);
var key, i;
for (i = 0; i < sourceKeys.length; i++) {
key = sourceKeys[i];
if (excluded.indexOf(key) >= 0) continue;
target[key] = source[key];
}
return target;
}
Clearly, there seems to be a misunderstanding on my part, so any guidance or pointers would be greatly appreciated. Thank you.
For reference, here is my package.json:
{
"name": "clientapp",
"version": "0.1.0",
"private": true,
"dependencies": {
// List of dependencies
},
"scripts": {
// List of scripts
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
// List of dev dependencies
}
}