I'm experiencing a significant issue with the build size of my React project. The size of the static/js/main.93955c9e.js.map file in my project is close to 32 MB. This is significantly larger than expected, and I'm looking for ways to optimize it.
Project Details:
- React version: 18.2.0
- Dependencies & devDependencies from package.json:
{
"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"axios": "^1.5.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-drag-drop-files": "^2.3.10",
"react-icons": "^4.11.0",
"react-router-dom": "^6.16.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
}
"devDependencies": {
"source-map-explorer": "^2.5.3"
}
}
The build size of my React project has become much larger than anticipated, with the main.93955c9e.js.map file reaching close to 32 MB. I've analyzed the bundle and source map using source-map-explorer, and I have a list of the 10 largest files/modules contributing to the size. Here is the list for reference:
react-dom/cjs/react-dom.production.min.js(Size: 12 MB)components/ComposeDraft.jsx(Size: 13.6 KB)pages/email/Page.jsx(Size: 13.1 KB)@emotion/stylis/dist/stylis.browser.esm.js(Size: 8.2 KB)react-drag-drop-files/dist/react-drag-drop-files.esm.js(Size: 7.8 KB)@babel/runtime/helpers/esm/regeneratorRuntime.js(Size: 6.6 KB)react/cjs/react.production.min.js(Size: 6.4 KB)pages/projectMaster/Page.jsx(Size: 6.4 KB)@remix-run/router/utils.ts(Size: 6.3 KB)react-router/lib/hooks.tsx(Size: 5.9 KB)
I'm looking for guidance on how to reduce the bundle size and source map size. Are there any specific optimizations or configurations that can help minimize these files? Additionally, if anyone has insights into why react-dom/cjs/react-dom.production.min.js is particularly large, I would greatly appreciate the help.
Any suggestions, tips, or guidance on optimizing my React project's build size and addressing this issue would be highly valuable. Thank you in advance for your assistance!