NX react app performance optimisation

[ankurvishnoi123]

Current Behavior

In the current project setup with NX, we're experiencing unexpected performance issues due to inefficiencies in code chunking and splitting. These issues primarily impact the initial page load and user experience, as large chunks are loading simultaneously, and chunking is creasing file size instead on reducing it and overall load performance.

When implementing this large-scale project with NX, we anticipated efficient code-splitting and chunking that aligns with our NX React apps. However, despite configuring lazy loading and dynamic imports, our bundle sizes remain unexpectedly large, causing sub-optimal performance. This problem was not highlighted in the NX documentation, nor was there any guidance around these specific code-splitting and chunking challenges in large, modularized React applications.

This performance issue is critical as it impacts our client’s end-user experience directly. Given the scale and complexity of the application, resolving this with guidance from the NX team or an enhanced documentation and build configuration would be highly beneficial.

Expected Behavior

The chunking of JS files should be as per react standard, it should not increase size of main.js on dynamic import, suspense etc.

GitHub Repo

No response

Steps to Reproduce

Nx Report

nx report.

Failure Logs

Package Manager Version

No response

Operating System

• macOS
• Linux
• Windows
• Other (Please specify)

Additional Information

No response