# Code splitting in React JS

"An organized or maintainable code can speak for itself, there is no need to explain" In React JS there is a main concept to enhance the performance of code and its maintainability, which is code splitting. Code splitting is a way to divide your code into smaller chunks or parts due to which you easily specify your specific functionality within the app.

One of the main benefits of code splitting is that no need to load the entire bundle JavaScript bundle, code splitting enables you to load only those portions of code that are related to a particular page. This leads to a reduction in initial load time as well as improves the performance of your application.

**Some of the key benefits of code splitting are as follows:**

1. Better caching and Resource utilization
    
2. Enhance performance
    
3. Reduce initial load time
    
4. Reduce bandwidth consumption
    

**Implementing code splitting**

1. Dynamic importing with React.lazy()
    
2. Implementing route based coding with libraries like react-router allows you to write page-specific code.
    
3. Handle errors with ErrorBoudary
    
4. Implement component loading with Suspense
    
5. Webpack code splitting: webpack is a popular module bundler for JavaScript applications, webpack breaks buldle into multiple files and allows you to load only those portions of the component that are required.