Reduce unused Javascript in CRA method

Question

after build build\static\js

How to split this file or reduce file size to improve page speed

Screenshot:

Reduce unused JavaScript

Removed unused imports, dead code , unused CSS, uninstalled unused packages from Package.json file

Answer 1

You can use Code Splitting, which will Divide your JavaScript code into smaller chunks, and load them dynamically when needed.

This can be achieved in various ways, one way is to using tools like webpack, which provide built-in support for code splitting. By splitting your code, you can load only the necessary parts of the application when a specific page or feature is requested, reducing the initial loading time.

Here are the few links for understanding of code Splitting:

1. https://legacy.reactjs.org/docs/code-splitting.html
2. https://www.freecodecamp.org/news/code-splitting-in-react-loadable-components/
3. https://www.geeksforgeeks.org/code-splitting-in-react/