--- title: Code-Splitting in ReactJs with Its Best Practices description: Code-Splitting in ReactJs with component-based separation Its Best Practices for CSS bundles splitting with in depth guide. image: https://www.xenonstack.com/hubfs/xenonstack-code-splitting-in-reactjs.png --- - [![xenonstack-logo](https://www.xenonstack.com/hubfs/xenonstack-logo-new-relase.svg)](https://www.xenonstack.com/) - - Foundry Foundry Unified reasoning foundation enabling seamless orchestration, analytics, infrastructure, and trust across intelligent ecosystems [![pointers-icon](https://www.xenonstack.com/hubfs/xs-revamp-header-dropdown/our-purpose-line-icon.svg) Akira AI - Reasoning and Agent Orchestration Turn models into collaborative, policy-governed agents that learn and act together](https://www.xenonstack.com/agentic-platforms/akira-ai/) [![pointers-icon](https://www.xenonstack.com/hubfs/xs-revamp-header-dropdown/autonomous-operations-icon.svg) ElixirData - Agentic Analytics Intelligence Explainable, decision-centric analytics for measurable business outcomes](https://www.xenonstack.com/agentic-platforms/elixirdata/) [![pointers-icon](https://www.xenonstack.com/hubfs/xs-revamp-header-dropdown/digital-immune-system-icon.svg) NexaStack - Agentic Infrastructure Automation Secure, compliant, and high-performance AI deployment across cloud, edge, and on-prem](https://www.xenonstack.com/agentic-platforms/nexastack-unified-inference/) [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/ai-driven-industries-hr-and-recruitment.svg) MetaSecure - Trust, Compliance, and Defense Continuous assurance with AI-BOMs, risk scoring, and agentic security](https://www.xenonstack.com/agentic-platforms/metasecure/) [![pointers-icon](https://www.xenonstack.com/hubfs/xs-revamp-header-dropdown/decision-intelligence-header-icon.svg) Neural AI – Agentic Intelligence & Autonomous Innovation AI agents for intelligent automation and adaptive innovation](https://www.xenonstack.com/agentic-platforms/neural-ai/) ### Reasoning Stack Powers intelligent systems with unified orchestration, adaptive analytics, scalable infrastructure, and built-in trust [See in action ![cta-arrow](https://www.elixirclaw.ai/hubfs/dropdown-assets/cta-arrow.svg)](https://www.xenonstack.com/agentic-ai/analytics-platform/) ![platfom-image](https://9471087.fs1.hubspotusercontent-na1.net/hubfs/9471087/Imported%20images/build-your-next-intelligent-workflows-banner-image.svg) - AI Agents AI Agents Pre-built autonomous agents designed for domain-specific intelligence, seamless integrations, and governed enterprise deployment By Domain [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/adaptive-ai-enterprise-operational-analytics.svg) Agentic Operations AgentSRE and AgentOps for automated reliability and IT operations](https://www.xenonstack.com/ai-agents/agentic-operations/) [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/industries-fintech.svg) Agentic Finance FinOps Agent and Budget Enforcer for optimized financial governance](https://www.xenonstack.com/ai-agents/agentic-finance/) [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/case-study-icon.svg) Agentic Risk and Compliance Audit Agent and Risk Assurance to automate compliance monitoring](https://www.xenonstack.com/ai-agents/agentic-risk-compliance/) [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/discover-digital-experience-platform.svg) Agentic Analytics Analyst Agent and Decision Advisor for AI-driven insights and strategy](https://www.xenonstack.com/ai-agents/agentic-analytics/) [![pointers-icon](https://www.xenonstack.com/hubfs/xs-revamp-header-dropdown/developer-experience-icon.svg) Agentic Supply Chain AI-powered advisor for smart sourcing, vendor insights, and strategic procurement](https://www.xenonstack.com/ai-agents/agentic-procurement/) [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/discover-serverless-application-development.svg) Agentic Security AI-driven defense delivering proactive threat detection and autonomous security orchestration](https://www.xenonstack.com/ai-agents/agentic-security/) By Integration [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/decision-intelligence-metaverse.svg) Snowflake AI Agents Pre-built connectors for real-time data intelligence on Snowflake](https://www.xenonstack.com/ai-agents/snowflake-ai-agents/) [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/optimize-cloud-migration.svg) Databricks AI Agents AI agents for automated data workflows and insights on Databricks](https://www.xenonstack.com/ai-agents/databricks-ai-agents/) [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/optimize-application-modernization.svg) ServiceNow AI Agents AI workflows to streamline service, incident, and operations automation](https://www.xenonstack.com/ai-agents/servicenow-ai-agents/) [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/cloud-native-devsecops.svg) Jira/Project Management Agents AI agents for backlog grooming, sprint planning, and real-time project visibility](https://www.xenonstack.com/ai-agents/jira-agents-actions/) [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/discover-digital-experience-platform.svg) SAP AI Agents AI copilots for finance, supply chain, and HR decisions across your SAP landscape](https://www.xenonstack.com/ai-agents/sap-agents-actions/) [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/ai-driven-industries-hr-and-recruitment.svg) Oracle AI Agents AI agents for financials, risk, and operations intelligence across Oracle applications](https://www.xenonstack.com/ai-agents/oracle-agents-actions/) - Solutions Solutions Governed AI solutions driving measurable business outcomes across operations, finance, security, and analytics [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/cloud-native-devops.svg) ReliabilityOps — Cloud Reliability Automation Automate reliability checks and optimize uptime with continuous reasoning](https://www.xenonstack.com/ai-agents/cloudops-reimagined/) [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/cloud-native-kubernetes.svg) IncidentOps — AI-Driven Site Reliability Resolve incidents faster with AI-led triage, contextual RCA, and adaptive recovery](https://www.xenonstack.com/ai-agents/sre-reimagined/) [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/discover-custom-software-development.svg) PlatformOps — Unified Platform Automation Unify infrastructure and AI systems with reasoning-driven automation and compliance](https://www.xenonstack.com/ai-agents/platformops-reimagined/) [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/decision-intelligence-customer-analytics.svg) DefenseOps — Autonomous Threat Defense Detect, analyze, and neutralize threats autonomously with adaptive defense intelligence](https://www.xenonstack.com/ai-agents/responsible-ai-aviator/) [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/optimize-business-intelligence.svg) TrustOps — Responsible AI and Continuous Governance Ensure transparency, fairness, and compliance in every AI system and decision](https://www.xenonstack.com/ai-agents/secops-reimagined/) [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/ai-driven-industries-manufacturing.svg) RiskOps — Predictive Risk Intelligence Predict, score, and mitigate risks proactively with real-time assurance intelligence](https://www.xenonstack.com/ai-agents/risk-management-aviator/) [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/adaptive-ai-explainable-ai.svg) FactoryOps — AI-Driven Industrial Automation Predict equipment failures and optimize production with adaptive intelligence](https://www.xenonstack.com/ai-agents/industrial-automation-reimagined/) [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/adaptive-ai-enterprise-operational-analytics.svg) AssetOps — Automated Asset Reliability Enable predictive maintenance and optimize lifecycle performance continuously](https://www.xenonstack.com/ai-agents/asset-operations-and-maintenance-reimagined/) [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/ai-driven-industries-infrastructure%20.svg) QualityOps — Continuous Testing Intelligence Accelerate testing cycles with autonomous validation and reasoning feedback](https://www.xenonstack.com/ai-agents/qaops-reimagined/) [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/industries-insurance.svg) SourcingOps — Intelligent Procurement Automate sourcing, vendor analysis, and spend insights for agile procurement](https://www.xenonstack.com/ai-agents/procurement-reimagined/) [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/decision-intelligence-augmented-data-management.svg) DataOps — Autonomous Data Pipeline Governance Ensure reliability, detect anomalies, and self-heal data pipelines automatically](https://www.xenonstack.com/ai-agents/dataops-reimagined/) [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/decision-intelligence-metaverse.svg) DecisionOps — Intelligent Decisioning Deliver explainable, auditable, and measurable outcomes with reasoning AI](https://www.xenonstack.com/ai-agents/desicison-reimagined/) - Industries Industries Industry blueprints showcasing agentic transformation, real-world impact, and measurable outcomes across key sectors [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/adaptive-ai-computer-vision.svg) Aerospace and Defense Autonomous flight systems and predictive maintenance powered by AI](https://www.xenonstack.com/industries/aerospace/) [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/industries-fintech.svg) Banking - Finance - Payments AI governance for secure, compliant, and adaptive financial operations](https://www.xenonstack.com/industries/banking/) [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/industries-retail.svg) Manufacturing and Industrial Automation Smart factories using reasoning systems for real-time quality optimization](https://www.xenonstack.com/industries/digital-manufacturing-services/) [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/optimize-cloud-infrastrcuture.svg) Enterprise - IT Operations AI-powered IT operations ensuring reliability, scalability, and cost efficiency](https://www.xenonstack.com/industries/enterprise-technology/) [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/xs-scale-clients-and-partners.svg) Consumer – Experience – Tech Personalized digital experiences driven by explainable and trusted AI](https://www.xenonstack.com/industries/consumer-technology/) [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/discover-platform-engineering.svg) Retail and Supply Chain Autonomous retail analytics enhancing operations, engagement, and forecasting accuracy](https://www.xenonstack.com/industries/retail/) [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/industries-healthcare.svg) Travel – Hospitality – Guest Experience Agentic systems delivering personalized guest journeys with contextual intelligence](https://www.xenonstack.com/industries/travel-hospitality/) - Resources Resources Explore insights, success stories, and learning programs that build knowledge and strengthen the AI transformation journey [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/xs-scale-xenonstack-university.svg) Blogs Stay updated with the latest industry trends, news, and thought leadership](https://www.xenonstack.com/blog) [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/insights.svg) Insights Explore in-depth AI articles, use cases, and innovative applications](https://www.xenonstack.com/insights) [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/use-case.svg) Use Cases Discover real-world applications of Agentic AI across industries](https://www.xenonstack.com/use-cases) [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/scale-cloud-native-applications.svg) Case Studies Learn how organizations are achieving success with our solutions](https://xenonstack.com/case-studies) [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/video.svg) Video Library Explore our collection of product demos, webinars, and AI thought leadership videos](https://www.xenonstack.com/videos/) [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/ebook.svg) E-Books Download comprehensive e-books on AI, SRE, and more](https://www.xenonstack.com/e-book) [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/presentation.svg) Presentations View our AI presentations, talks, and conference sessions on AI innovation](https://www.xenonstack.com/presentations/) - Company Company Discover our people, principles, and purpose driving innovation, trust, and meaningful careers in the AI era [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/xs-journey-about-us.svg) About Us Discover our mission, story, and the values driving our innovation and impact](https://www.xenonstack.com/about-us/) [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/xs-scale-xenonstack-university.svg) Xenonstack Academy Enhance your skills with our comprehensive training programs and courses designed for modern tech professionals](https://www.xenonstack.com/xenonstack-academy/) [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/xs-scale-clients-and-partners.svg) Contact Us Get in touch with us for support, business inquiries, or collaboration opportunities](https://www.xenonstack.com/contact-us/) [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/ai-driven-industries-public-safety.svg) Leadership Team Meet the visionary leaders guiding Xenonstack’s strategic direction and innovation](https://www.xenonstack.com/about-us/leadership-team/) [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/adaptive-ai-enterprise-knowledge-graph.svg) Tao of Xenonstack Learn about the guiding principles and philosophies that shape our culture and solutions](https://www.xenonstack.com/about-us/tao-of-xenonstack/) [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/xs-journey-how-we-work.svg) How We Work Understand our collaborative approach and work culture that drive successful outcomes](https://www.xenonstack.com/about-us/how-we-work/) [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/xs-journey-how-we-grow.svg) How We Grow Explore how we nurture talent, foster innovation, and promote sustainable growth](https://www.xenonstack.com/about-us/how-we-grow/) [![pointers-icon](https://www.xenonstack.com/hubfs/xs-header-dropdown/xs-journey-our-purpose.svg) Careers Join our growing team! Explore career opportunities to work at the forefront of innovation](https://www.xenonstack.com/careers/) - Get Started [![xenonstack-logo](https://www.xenonstack.com/hubfs/xenonstack-logo-new-relase.svg)](https://www.xenonstack.com/) - Foundry ![dropdown-icon](https://www.elixirclaw.ai/hubfs/dropdown-assets/dropdown-icon.svg) [Akira AI](https://www.xenonstack.com/agentic-platforms/akira-ai/) [ElixirData](https://www.xenonstack.com/agentic-platforms/elixirdata/) [NexaStack](https://www.xenonstack.com/agentic-platforms/nexastack-unified-inference/) [MetaSecure](https://www.xenonstack.com/agentic-platforms/metasecure/) [Neural AI](https://www.xenonstack.com/agentic-platforms/neural-ai/) - AI Agents ![dropdown-icon](https://www.elixirclaw.ai/hubfs/dropdown-assets/dropdown-icon.svg) [Agentic Operations](https://www.xenonstack.com/ai-agents/agentic-operations/) [Agentic Finance](https://www.xenonstack.com/ai-agents/agentic-finance/) [Agentic Risk and Compliance](https://www.xenonstack.com/ai-agents/agentic-risk-compliance/) [Agentic Analytics](https://www.xenonstack.com/ai-agents/agentic-analytics/) [Agentic Supply Chain](https://www.xenonstack.com/ai-agents/agentic-procurement/) [Agentic Security](https://www.xenonstack.com/ai-agents/agentic-security/) [Snowflake AI Agents](https://www.xenonstack.com/ai-agents/snowflake-ai-agents/) [Databricks AI Agents](https://www.xenonstack.com/ai-agents/databricks-ai-agents/) [ServiceNow AI Agents](https://www.xenonstack.com/ai-agents/servicenow-ai-agents/) [Jira/Project Management Agents](https://www.xenonstack.com/ai-agents/jira-agents-actions/) [SAP AI Agents](https://www.xenonstack.com/ai-agents/sap-agents-actions/) [Oracle AI Agents](https://www.xenonstack.com/ai-agents/oracle-agents-actions/) - Solutions ![dropdown-icon](https://www.elixirclaw.ai/hubfs/dropdown-assets/dropdown-icon.svg) [ReliabilityOps](https://www.xenonstack.com/ai-agents/cloudops-reimagined/) [IncidentOps](https://www.xenonstack.com/ai-agents/sre-reimagined/) [PlatformOps](https://www.xenonstack.com/ai-agents/platformops-reimagined/) [DefenseOps](https://www.xenonstack.com/ai-agents/responsible-ai-aviator/) [TrustOps](https://www.xenonstack.com/ai-agents/secops-reimagined/) [RiskOps](https://www.xenonstack.com/ai-agents/risk-management-aviator/) [FactoryOps](https://www.xenonstack.com/ai-agents/industrial-automation-reimagined/) [AssetOps](https://www.xenonstack.com/ai-agents/asset-operations-and-maintenance-reimagined/) [QualityOps](https://www.xenonstack.com/ai-agents/qaops-reimagined/) [SourcingOps](https://www.xenonstack.com/ai-agents/procurement-reimagined/) [DataOps](https://www.xenonstack.com/ai-agents/dataops-reimagined/) [DecisionOps](https://www.xenonstack.com/ai-agents/desicison-reimagined/) - Industries ![dropdown-icon](https://www.elixirclaw.ai/hubfs/dropdown-assets/dropdown-icon.svg) [Aerospace and Defense](https://www.xenonstack.com/industries/aerospace/) [Banking - Finance - Payments](https://www.xenonstack.com/industries/banking/) [Manufacturing and Industrial Automation](https://www.xenonstack.com/industries/digital-manufacturing-services/) [Enterprise - IT Operations](https://www.xenonstack.com/industries/enterprise-technology/) [Consumer – Experience – Tech](https://www.xenonstack.com/industries/consumer-technology/) [Retail and Supply Chain](https://www.xenonstack.com/industries/retail/) [Travel – Hospitality – Guest Experience](https://www.xenonstack.com/industries/travel-hospitality/) - Resources ![dropdown-icon](https://www.elixirclaw.ai/hubfs/dropdown-assets/dropdown-icon.svg) [Blogs](https://www.xenonstack.com/blog) [Insights](https://www.xenonstack.com/insights) [Use Cases](https://www.xenonstack.com/use-cases) [Case Studies](https://www.xenonstack.com/case-studies) [Video Library](https://www.xenonstack.com/videos/) [E-Books](https://www.xenonstack.com/e-book) [Presentations](https://www.xenonstack.com/presentations/) - Company ![dropdown-icon](https://www.elixirclaw.ai/hubfs/dropdown-assets/dropdown-icon.svg) [About Us](https://www.xenonstack.com/about-us/) [Xenonstack Academy](https://www.xenonstack.com/xenonstack-academy/) [Contact Us](https://www.xenonstack.com/contact-us/) [Leadership Team](https://www.xenonstack.com/about-us/leadership-team/) [Tao of Xenonstack](https://www.xenonstack.com/about-us/tao-of-xenonstack/) [How We Work](https://www.xenonstack.com/about-us/how-we-work/) [How We Grow](https://www.xenonstack.com/about-us/how-we-grow/) [Careers](https://www.xenonstack.com/careers/) - Get Started ![slider-cross-icon](https://www.xenonstack.com/hubfs/slider-cross-icon.svg) ## Interested in Solving your Challenges with XenonStack Team ## Get Started Get Started with your requirements and primary focus, that will help us to make your solution First Name \* Please enter a valid First Name Last Name \* Please enter a valid Last Name Business Email ID \* Please enter a valid Business Email ID Contact Number \* Please enter a valid Contact Number Company \* Please enter a valid Company Name Industry Belongs To \* Please Select your Industry Banking Fintech Payment Providers Wealth Management Discrete Manufacturing Semiconductor Machinery Manufacturing / Automation Appliances / Electrical / Electronics Elevator Manufacturing Defense & Space Manufacturing Computers & Electronics / Industrial Machinery Motor Vehicle Manufacturing Food and Beverages Distillery & Wines Beverages Shipping Logistics Mobility (EV / Public Transport) Energy & Utilities Hospitality Digital Gaming Platforms SportsTech with AI Public Safety - Explosives Public Safety - Firefighting Public Safety - Surveillance Public Safety - Others Media Platforms City Operations Airlines & Aviation Defense Warfare & Drones Robotics Engineering Drones Manufacturing AI Labs for Colleges AI MSP / Quantum / AGI Institutes Retail Apparel and Fashion Please select all the required fields before proceeding Proceed Next ## Interested in Solving your Challenges with XenonStack ## Personalization Get Started with your requirements and primary focus, that will help us to make your solution ### What is your Key focus areas? \* AI Workflow and Operations Data Management and Operations AI Governance Analytics and Insights Observability Security Operations Risk and Compliance Procurement and Supply Chain Private Cloud AI Vision AI ### In Which Agentic Platform and Accelerator you are Interested? \* Akira AI - Agentic AI Platform Multi Agent System Metasecure - Autonomous SOC Nexastack – Build and Managed Compound AI Stack Data Foundry XAI – Vision and AI Platform – Visual AI Agents Strategy Consulting AI Managed Services Others (Please Specify) ### Which segment does your company belong to? \* Startup Scale Startup SME Mid Enterprises Large Enterprises Federal Government Non Profits Others (Please Specify) ### At what stage is your AI use case currently in? \* Conceptualized: Use case defined, PoC pending POC Completed In Production with challenges Not yet defined Others (Please Specify) ### What are the primary challenges in adopting AI? \* Data Quality Issues Data Privacy and Compliance Aligning AI with business goals Unclear ROI from POCs Integration with existing ERP systems Scalability Challenges Moving POCs in Production Infrastructure Limitation High Implementation costs Others (Please Specify) ### What kind of infrastructure does your organization currently using? \* AWS Microsoft Azure GCP IBM Cloud Oracle Cloud On Premises Others (Please Specify) ### Are you using any Data platform? \* Databricks SnowFlake Amazon Redshift Azure Synapse Analytics Microsoft Fabric Teradata Oracle Database SAP Hana Informatica Google Cloud BigQuery Others (Please Specify) ### Preferred Approach for AI Transformation \* Assisted Intelligence Agents as Co-Pilot Collaborative Intelligence Agents as AI Teammates Autonomous Intelligence Agents – AI Agents Agentic Actions Agentic Process Automation ### In Which Domain your Solution/Organization belongs to in-terms of Data Privacy, Trustworthy AI \* Internal Organization Highly Regulated Industry (Healthcare, Financials etc) Medium Regulated Non Regulated ### Captcha Verification \* captcha text ![Refresh Icon](https://www.xenonstack.com/hs-fs/hubfs/refresh.png?width=20&height=20&name=refresh.png) Please select all the required fields Review Previous Submit ![green-checkmark](https://www.xenonstack.com/hubfs/green-checkmark.svg) ## your request has been submitted successfully ! Our XenonStack Team will shortly reach out to you. We are looking forward to showcase how XenonStack can transform your business. ![usecase-banner (1)](https://www.xenonstack.com/hs-fs/hubfs/usecase-banner%20(1).webp?width=1921&height=622&name=usecase-banner%20(1).webp) [Enterprise Digital Platform](https://www.xenonstack.com/insights/tag/enterprise-digital-platform) # Code-Splitting in ReactJs with Its Best Practices [Navdeep Singh Gill](https://www.xenonstack.com/insights/author/navdeep-singh-gill) | 04 November 2022 ![Code-Splitting in ReactJs with Its Best Practices](https://www.xenonstack.com/hs-fs/hubfs/xenonstack-code-splitting-in-reactjs.png?width=1280&height=720&name=xenonstack-code-splitting-in-reactjs.png) ## What is Code-Splitting? Code splitting is the splitting of code into components or numerous bundles which can be loaded when there is a demand or in parallel. As an application grows, the complexity of it grows, too, and CSS bundles, especially as the number and size of libraries increases. It can be split into multiple smaller files to mitigate downloading all files. How to do this process will be explained in the below key points. > A tool that enables end users, administrators and organizations to gauge and evaluate the performance of a given system. Click to explore about, [Performance Monitoring Tools and Management](https://www.xenonstack.com/insights/what-is-performance-monitoring) ## Why do we need it? Every day, users visit hundreds of websites and only stay a few times. According to [Google’s survey](https://www.thinkwithgoogle.com/intl/en-154/marketing-strategies/app-and-mobile/need-mobile-speed-how-mobile-latency-impacts-publisher-revenue/), up to 53 percent of visits are abandoned if sites take longer than 2-3 seconds to load. Performance optimization is a major key point to achieve every developer deals with. The developer does their development local where they can see less or no performance issues, but after production, once we try to navigate the application, we immediately notice the render time is high, which explains that our application is slow. While developing on a local server, all files are hosted from a local port: 3000. However, downloading large files becomes a major issue while the application goes live, So code-splitting plays a big and major role. ### What are the best practices to implement Code-splitting? The best practices for code splitting are defined below: ### Component-based You might render different components inside your container component depending on the state, like whether or not a user is logged in. With the same Loadable component, we can accomplish this. Consider this scenario, in which a component is only rendered into the view once the user clicks on it. ``` import React, { useState } from 'react'; ``` It is the process of taking a large bundle of your application and dividing it into small parts components. If above we use another function to render, we can divide from the main app and import it as a component in the main bundle from where we can utilize its functionality. ### Route-centric code splitting The following are the steps for Route-centric code splitting Dynamic Imports This is a JavaScript feature that similarly imports our files to promise. Before: ``` import Login from "Pages/Login.js"; ``` Static import is used in the code above to import our files. Webpack combines all the files when it encounters this syntax. We're doing this because we'd like to include them both statically. After: ``` const module = await import('/modules/myCustomModule.js'); ``` Dynamic imports are asynchronous, in contrast to synchronous static imports. We can now import our modules and files whenever we want. When webpack encounters this syntax, it begins code splitting our application right away. ### React.lazy() This is a component function that takes another function as an argument. This function does a dynamic import and returns a promise as a result. React handles this promise.lazy(), which expects a module to be returned containing a default export React component. Before: ``` import Login from "Pages/Login.js"; ``` After: ``` import React, {lazy} from "react"; ``` The login page is now lazy-loaded, which means the Login.js chunk is only loaded when the page is shown. > A modern, statically typed, general-purpose, high-level programming language supporting object-oriented and functional programming. Click to explore about, [Functional Programming in Scala](https://www.xenonstack.com/insights/functional-programming-in-scala) ### React.Suspense() We can use React.Suspense() to conditionally halt a component's rendering until it has loaded. It has a fallback prop that takes a React element as a parameter. A JSX snippet or a whole component can be used as a React element. A user may see a blank screen while the app loads the module on a page that supports dynamic imports. Because dynamic imports are asynchronous, a user may receive an error. If the user has a slow internet connection, the chances of this happening rise.This problem is solved by combining React.lazy() and React.suspense(). WhileReact.Suspense suspends a component's rendering until all of its dependencies are lazy-loaded. It also serves as a fallback UI by displaying the React element supplied to the fallback props. Consider the code below: ``` import React, { lazy, Suspense } from 'react'; ``` The font and service components are lazy-loaded here. These are the home component's dependencies. It is required that they display the entire homepage. We utilize the suspense component to prevent a user from seeing an error or a blank page when they visit the homepage by suspending the rendering of the home component until dependencies are lazy-loaded. The user is now presented with the following fallback UI while a component is being lazy-loaded: ```
Page is Loading...
``` ### React-router Route-level code-splitting is supported out of the box by the react-router-dom package. It enables us to download portions on a route-by-route basis. As a result, we'll code split at the route level, which will be quite useful. ``` import React, { Suspense, lazy } from 'react'; ``` Here, we set our routes using the react-router-dom library, and the shop and home components are loaded as lazy-loaded. Here suspense covered all the routes, ensuring that a fallback UI is rendered while the requested components are lazy-loaded. > A way of writing applications using only pure functions and immutable values. Click to explore about, [Functional Programming](https://www.xenonstack.com/insights/functional-programming) ## Conclusion Lazy and Suspense to create a better React app. React itself comes with an optimized solution while we use create-react-app. For further enhancement, code-splitting needs to reduce render time, which states in dynamic imports, react. - Explore the comparison between [Golang vs Rust](https://www.xenonstack.com/insights/golang-vs-rust) - Discover more about [Functional Testing and Its Types](https://www.xenonstack.com/insights/what-is-functional-testing) ## Share Article - [![XenonStack Facebook](https://www.xenonstack.com/hubfs/xenonstack-facebook-service.svg)](http://www.facebook.com/share.php?u=https://www.xenonstack.com/insights/code-splitting-in-react) - [![XenonStack Twitter](https://www.xenonstack.com/hubfs/xs-twitter-white-updated-icon.svg)](https://twitter.com/intent/tweet?text=I+found+this+interesting+blog+post&url=https://www.xenonstack.com/insights/code-splitting-in-react) - [![XenonStack Linked In](https://www.xenonstack.com/hubfs/xenonstack-linkedin-service.svg)](http://www.linkedin.com/shareArticle?mini=true&url=https://www.xenonstack.com/insights/code-splitting-in-react) - [![XenonStack Email Icon](https://www.xenonstack.com/hubfs/xenonstack-email-service.svg)](mailto:?subject=Check%20out%20https://www.xenonstack.com/insights/code-splitting-in-react%20&body=Check%20out%20https://www.xenonstack.com/insights/code-splitting-in-react) ## Table of Contents ## Share Article - [![XenonStack Facebook](https://www.xenonstack.com/hubfs/xenonstack-facebook-service.svg)](http://www.facebook.com/share.php?u=https://www.xenonstack.com/insights/code-splitting-in-react) - [![XenonStack Twitter](https://www.xenonstack.com/hubfs/xs-twitter-white-updated-icon.svg)](https://twitter.com/intent/tweet?text=I+found+this+interesting+blog+post&url=https://www.xenonstack.com/insights/code-splitting-in-react) - [![XenonStack Linked In](https://www.xenonstack.com/hubfs/xenonstack-linkedin-service.svg)](http://www.linkedin.com/shareArticle?mini=true&url=https://www.xenonstack.com/insights/code-splitting-in-react) - [![XenonStack Email Icon](https://www.xenonstack.com/hubfs/xenonstack-email-service.svg)](mailto:?subject=Check%20out%20https://www.xenonstack.com/insights/code-splitting-in-react%20&body=Check%20out%20https://www.xenonstack.com/insights/code-splitting-in-react) ## Explore Related Topics [Platform Engineering](https://www.xenonstack.com/insights/tag/platform-engineering) [DevSecOps](https://www.xenonstack.com/insights/tag/devsecops) [Deployment Automation](https://www.xenonstack.com/insights/tag/deployment-automation) [Continuous Security](https://www.xenonstack.com/insights/tag/continuous-security) [Generative AI](https://www.xenonstack.com/blog/tag/generative-ai) [Cyber Security](https://www.xenonstack.com/insights/tag/cyber-security) [Enterprise Cloud](https://www.xenonstack.com/insights/tag/enterprise-cloud) [Data Science](https://www.xenonstack.com/insights/tag/data-science) [Kubernetes](https://www.xenonstack.com/insights/tag/kubernetes) ![navdeep-singh-gill](https://www.xenonstack.com/hubfs/navdeep-gill-ceo-xenonstack.svg) ## Navdeep Singh Gill Global CEO and Founder of XenonStack Navdeep Singh Gill is serving as Chief Executive Officer and Product Architect at XenonStack. He holds expertise in building SaaS Platform for Decentralised Big Data management and Governance, AI Marketplace for Operationalising and Scaling. His incredible experience in AI Technologies and Big Data Engineering thrills him to write about different use cases and its approach to solutions. [Explore More by Navdeep Singh Gill ![cta-blue-arrow](https://www.xenonstack.com/hubfs/cta-arrow-blue.svg)](https://www.xenonstack.com/insights/author/navdeep-singh-gill) ![Subscribe background](https://www.xenonstack.com/hubfs/blog-post-subscribe.svg) ## Subscribe to our Latest Technology Insights and Resources Subscribe Now ![slider-cross-icon](https://www.xenonstack.com/hubfs/slider-cross-icon.svg) ## Get the latest articles in your inbox Business Email ID \* Please enter a valid Business Email ID Company Name \* Please enter a valid Company Name Yes, I would like to receive the XenonStack newsletter as well as marketing emails regarding XenonStack products, services, and events. I can unsubscribe at any time. By registering, you confirm that you agree to the processing of your personal data by XenonStack as described in the Privacy Policy. Subscribe Now ## Related Articles ![Flutter Widgets List and Hierarchy | An Essential Guide](https://www.xenonstack.com/hs-fs/hubfs/flutter-widgets-list.png?width=1200&height=675&name=flutter-widgets-list.png) ### [Flutter Widgets List and Hierarchy | An Essential Guide](https://www.xenonstack.com/insights/flutter-widgets-list) 18 March 2025 ![Rook Storage Orchestration for Kubernetes | An Essential Guide](https://www.xenonstack.com/hs-fs/hubfs/rook-storage-orchestration-kubernetes.png?width=1200&height=675&name=rook-storage-orchestration-kubernetes.png) ### [Rook Storage Orchestration for Kubernetes | An Essential Guide](https://www.xenonstack.com/insights/rook-storage-orchestration-kubernetes) 06 June 2023 ![A Guide to Stateful and Stateless Applications Best Practices](https://www.xenonstack.com/hs-fs/hubfs/stateful-and-stateless-applications.png?width=1200&height=675&name=stateful-and-stateless-applications.png) ### [A Guide to Stateful and Stateless Applications Best Practices](https://www.xenonstack.com/insights/stateful-and-stateless-applications) 12 February 2025 ![xenonstack-logo](https://www.xenonstack.com/hubfs/xenonstack-new-logo-release.svg) XenonStack Agentic Foundry powers enterprise agentic systems with unified infra, analytics, workflows, and security to drive automation and compliance. [![Youtube](https://www.xenonstack.com/hubfs/xs-footer-social-icons/youtube-icon.svg)](https://www.youtube.com/c/XenonStackOfficial) [![LinkedIn](https://www.xenonstack.com/hubfs/xs-footer-social-icons/linkedin-icon.svg)](https://www.linkedin.com/company/xenonstack/) [![Github](https://www.xenonstack.com/hubfs/xs-footer-social-icons/github-icon.svg)](https://github.com/xenonstack) [![Twitter](https://www.xenonstack.com/hubfs/xs-footer-social-icons/twitter-icon.svg)](https://twitter.com/xenonstack) [![Medium](https://www.xenonstack.com/hubfs/xs-footer-social-icons/medium-icon.svg)](https://medium.com/@xenonstack) [![Instagram](https://www.xenonstack.com/hubfs/xs-footer-social-icons/instagram-icon.svg)](https://www.instagram.com/teamxenonstack/) ![iso-9001-certified](https://www.xenonstack.com/hubfs/iso-9001-2015-certified.svg) ![iso-27001-certified](https://www.xenonstack.com/hubfs/iso-27001-2022-certified.svg) ![soc-certified](https://www.xenonstack.com/hubfs/soc-certified-org.svg) ![power-bi-partner](https://www.xenonstack.com/hubfs/power-bi-2.svg) ![kubernetes-certified-partner](https://www.xenonstack.com/hubfs/kubernetes-certified.svg) ![advance-tier-competency](https://www.xenonstack.com/hubfs/xenonstack-competency/aws-advanced-tier-service.svg) ![managed-service-competency](https://www.xenonstack.com/hubfs/xenonstack-competency/aws-managed-service.svg) ![ml-service-competency](https://www.xenonstack.com/hubfs/xenonstack-competency/aws-ml-competency.svg) ![devops-service-competency](https://www.xenonstack.com/hubfs/xenonstack-competency/aws-devops-competency.svg) ![amazon-kinesis-delivery](https://www.xenonstack.com/hubfs/xenonstack-competency/amazon-kinesis.svg) ## AI Engineering [Composite AI](https://www.xenonstack.com/artificial-intelligence/composite-ai/) [Decision AI](https://www.xenonstack.com/artificial-intelligence/decision-ai/) [AI Quality](https://www.xenonstack.com/artificial-intelligence/ai-quality/) [Generative AI](https://www.xenonstack.com/artificial-intelligence/generative-ai/) [Multimodal AI](https://www.xenonstack.com/artificial-intelligence/multimodal-ai/) [AI Assurance](https://www.xenonstack.com/artificial-intelligence/explainable-ai/) [MLOps](https://www.xenonstack.com/artificial-intelligence/mlops/) [Physical AI](https://www.xenonstack.com/artificial-intelligence/physical-ai/) [Augmented Engineering](https://www.xenonstack.com/artificial-intelligence/ai-augmented-software-development/) [Generative BI](https://www.xenonstack.com/artificial-intelligence/generative-bi/) ## Data Foundry [Streaming Data Platform](https://www.xenonstack.com/dataops/streaming-data-platform/) [Data Lakehouse](https://www.xenonstack.com/dataops/delta-lake/) [Data Catalog](https://www.xenonstack.com/dataops/data-catalog/) [Data Observability](https://www.xenonstack.com/dataops/data-observability/) [Cloud Data Warehouse](https://www.xenonstack.com/dataops/cloud-data-warehouse/) [Data Engineering](https://www.xenonstack.com/dataops/data-engineering/) [MetaData Management](https://www.xenonstack.com/dataops/metadata-management/) [Data Quality](https://www.xenonstack.com/dataops/augmented-data-quality/) [Real Time Analytics](https://www.xenonstack.com/dataops/real-time-analytics/) [Data Modernization](https://www.xenonstack.com/dataops/data-modernization/) ## Platform Engineering [Cloud Native](https://www.xenonstack.com/cloud-native/platform-engineering/) [Automation As Code](https://www.xenonstack.com/cloud-native/automation-as-code/) [Observability](https://www.xenonstack.com/cloud-native/observability/) [FinOps](https://www.xenonstack.com/cloud-native/finops/) [Application Modernization](https://www.xenonstack.com/cloud-native/application-modernization/) [DevSecOps](https://www.xenonstack.com/cloud-native/devsecops/) [Site Reliability Engineering](https://www.xenonstack.com/cloud-native/site-reliability-engineering/) [Progressive Delivery](https://www.xenonstack.com/cloud-native/progressive-delivery/) [GitOps](https://www.xenonstack.com/cloud-native/gitops/) [Compliance as code](https://www.xenonstack.com/cloud-native/compliance-as-code/) [Value Stream Management](https://www.xenonstack.com/cloud-native/value-stream-management/) [Policy as Code](https://www.xenonstack.com/cloud-native/policy-as-code/) [Telemetry Pipeline](https://www.xenonstack.com/cloud-native/telemetry-pipeline/) ## Agentic AI [Agentic Analytics](https://www.xenonstack.com/agentic-ai/enterprise-systems/) [Agentic AI Systems](https://www.xenonstack.com/agentic-ai/agentic-ai-system/) [Process Intelligence](https://www.xenonstack.com/agentic-ai/business-process-operations/) [Developer Experience](https://www.xenonstack.com/agentic-ai/developer-experience-platform/) [Autonomous Operations](https://www.xenonstack.com/agentic-ai/autonomous-operations/) [AI Vision at EDGE](https://www.xenonstack.com/agentic-ai/edge-and-vision-ai/) [Compound AI System](https://www.xenonstack.com/agentic-ai/compound-ai-system/) [GUI Agents](https://www.xenonstack.com/agetic-ai/gui-agents/) [CMDB Management](https://www.xenonstack.com/agentic-ai/cmdb-management/) [ITSM](https://www.xenonstack.com/agentic-ai/itsm/) [Network Automation](https://www.xenonstack.com/agentic-ai/network-automation/) ## AI Agents [DataBricks AI Agents](https://www.xenonstack.com/ai-agents/databricks-ai-agents/) [SnowFlake AI Agents](https://www.xenonstack.com/ai-agents/snowflake-ai-agents/) [ServiceNow AI Agents](https://www.xenonstack.com/ai-agents/servicenow-ai-agents/) [AWS AI Agents](https://www.xenonstack.com/ai-agents/aws-ai-agents/) [Microsoft Azure AI Agents](https://www.xenonstack.com/ai-agents/microsoft-azure-ai-agents-actions/) [SalesForce AI Agents](https://www.xenonstack.com/ai-agents/salesforce-agents-actions/) [MySQL AI Agents](https://www.xenonstack.com/ai-agents/mysql-agents-actions/) [PostgreSQL AI Agents](https://www.xenonstack.com/ai-agents/postgresql-agents-actions/) [Datadog AI Agents](https://www.xenonstack.com/ai-agents/datadog-agents-actions/) [DynaTrace AI Agents](https://www.xenonstack.com/ai-agents/dynatrace-agents-actions/) [Splunk AI Agents](https://www.xenonstack.com/ai-agents/splunk-agents-actions/) [BigQuery AI Agents](https://www.xenonstack.com/ai-agents/bigquery-agents-actions/) [SAP AI Agents](https://www.xenonstack.com/ai-agents/sap-agents-actions/) [Infor AI Agents](https://www.xenonstack.com/ai-agents/infor-agents-actions/) [Oracle AI Agents](https://www.xenonstack.com/ai-agents/oracle-agents-actions/) [WorkDay AI Agents](https://www.xenonstack.com/ai-agents/workday-agents-actions/) [Jira AI Agents](https://www.xenonstack.com/ai-agents/jira-agents-actions/) ## Industry [Aerospace and Aviation](https://www.xenonstack.com/industries/aerospace/) [Financial Services](https://www.xenonstack.com/industries/banking/) [Automotive And Industrial](https://www.xenonstack.com/industries/automotive/) [Consumer Tech](https://www.xenonstack.com/industries/consumer-technology/) [Technology, Media and Telco](https://www.xenonstack.com/industries/enterprise-technology/) [Digital Supply Chain](https://www.xenonstack.com/industries/digital-supply-chain/) [Hospitality and Tourism](https://www.xenonstack.com/industries/travel-hospitality/) [Discrete Manufacturing](https://www.xenonstack.com/industries/automotive/) [Education](https://www.xenonstack.com/industries/education/) [Media and Entertainment](https://www.xenonstack.com/industries/media-entertainment/) [Oil and Gas](https://www.xenonstack.com/industries/oil-and-gas/) [Energy and Utilities](https://www.xenonstack.com/industries/energy-and-utilities/) ## Enterprise Support [AI Managed Services](https://www.xenonstack.com/managed-services/ai-managed-services/) [Kubernetes Managed Services](https://www.xenonstack.com/managed-services/kubernetes/) [SRE as a Service](https://www.xenonstack.com/managed-services/site-reliability-engineering/) [Data Managed Services](https://www.xenonstack.com/managed-services/big-data/) [Analytics Managed Services](https://www.xenonstack.com/managed-services/analytics-managed-services/) [Data Protection](https://www.xenonstack.com/readiness-assessment/data-protection/) [On-Premise AI](https://www.xenonstack.com/managed-services/on-premise-ai-cluster/) ## Solutions [Private Cloud](https://www.xenonstack.com/solutions/private-cloud/) [Internal Developer Platform](https://www.xenonstack.com/solutions/internal-developer-platform/) [AI Inference](https://www.xenonstack.com/solutions/ai-inference/) [Open-Source Data Platform](https://www.xenonstack.com/solutions/open-source-data-platform/) [AI Trust Score](https://www.xenonstack.com/solutions/ai-trust-score/) [Autonomous SoC](https://www.xenonstack.com/solutions/autonomous-soc/) [Digital Twin](https://www.xenonstack.com/solutions/digital-twin/) [Readiness Assessment](https://www.xenonstack.com/readiness-assessment/) [Talk To Specialist](https://www.xenonstack.com/talk-to-specialist/) ## Company [About Us](https://www.xenonstack.com/about-us/) [Leadership Team](https://www.xenonstack.com/about-us/leadership-team/) [TAO of XenonStack](https://www.xenonstack.com/about-us/tao-of-xenonstack/) [How We Grow](https://www.xenonstack.com/about-us/how-we-grow/) [How We Work](https://www.xenonstack.com/about-us/how-we-work/) [Careers](https://www.xenonstack.com/careers/) [XA - QSIR](https://www.xenonstack.com/xenonstack-academy/) [Contact Us](https://www.xenonstack.com/contact-us/) [Book Demo](https://demo.xenonstack.com/) ## Resources [Blog](https://www.xenonstack.com/blog) [Insights](https://www.xenonstack.com/insights/) [Use Cases](https://www.xenonstack.com/use-cases) [Case Study](https://www.xenonstack.com/case-studies) [Videos](https://www.xenonstack.com/videos/) [EBooks](https://www.xenonstack.com/e-book) [Presentations](https://www.xenonstack.com/presentations/) @2026 XenonStack - A Stack Innovator! [Privacy Policy](https://www.xenonstack.com/privacy-policy/) [Terms and Conditions](https://www.xenonstack.com/terms-and-conditions/) Global Presence : ![india-flag-icon](https://www.xenonstack.com/hubfs/united-states.svg) USA ![india-flag-icon](https://www.xenonstack.com/hubfs/uae-flag-icon.svg) Dubai ![india-flag-icon](https://www.xenonstack.com/hubfs/india-flag-icon.svg) India ![india-flag-icon](https://www.xenonstack.com/hubfs/united-kingdom.svg) UK ![india-flag-icon](https://www.xenonstack.com/hubfs/australia-flag-icon.svg) Australia ✕ ## Agent SRE for Reliability and Observability Solutions AI continuously monitors systems for risks before they escalate. It correlates signals across logs, metrics, and traces. This ensures faster detection, fewer incidents, and stronger reliability - ![Performance Icon](https://www.xenonstack.com/hubfs/performance.svg)Proactive detection of performance and availability issues - ![Root Cause Icon](https://www.xenonstack.com/hubfs/root-cause.svg)Root-cause analysis across microservices and environments - ![Remediation Icon](https://www.xenonstack.com/hubfs/remediation.svg)Automated remediation playbooks to reduce MTTR [Explore Agent SRE](https://agentsre.ai/) ![akira-ai-banner-illustration](https://www.xenonstack.com/hubfs/akira-ai-banner-illustration.svg) ✕ ## Physical Surveillance with Vision AI Agent Technology AI converts camera feeds into instant situational awareness. It detects unusual motion and unsafe behavior in real time. Long hours of video become searchable and summarized instantly - ![Motion Icon](https://www.xenonstack.com/hubfs/motion.svg)Real-time detection of suspicious motion or intrusion - ![Video Search Icon](https://www.xenonstack.com/hubfs/video-search.svg)Natural language video search and instant playback - ![Summary Icon](https://www.xenonstack.com/hubfs/summary.svg)Smart summaries for audits, investigations, and compliance [See Vision AI in Action](https://www.xenonstack.ai/) ![physical-surveillance](https://www.xenonstack.com/hubfs/xai-banner-image.svg) ✕ ## Agentic Data Intelligence Across Your Full Data Stack Your data stack becomes intelligent and conversational. Agents surface insights, detect anomalies, and explain trends. Move from dashboards to autonomous, always-on analytics - ![Connects warehouses](https://www.xenonstack.com/hubfs/data-icon.svg)Connects to warehouses, lakes, and streaming sources - ![Question Answering](https://www.xenonstack.com/hubfs/answers.svg)Question-answering in natural language - ![Continuous monitoring](https://www.xenonstack.com/hubfs/monitoring-2.svg)Continuous monitoring for anomalies and KPI deviations [See in Action](https://elixirdata.co/) ![agentic-data-intelligence](https://www.xenonstack.com/hubfs/empowerment-of-analysts.svg) ✕ ## Intelligent Diagnostic for Self-Healing System Automation Agents identify recurring failures and performance issues. They trigger workflows that resolve common problems automatically. Your infrastructure evolves into a self-healing environment - ![Diagnostics Icon](https://www.xenonstack.com/hubfs/diagnostic.svg)Automated diagnostics for recurring errors - ![Playbook Icon](https://www.xenonstack.com/hubfs/playbook.svg)Playbook execution: restart services, scale pods, clear queues - ![Feedback Icon](https://www.xenonstack.com/hubfs/feedback.svg)Feedback loop for improving remediation strategies [See in Action](https://agentanalyst.ai/) ![intelligent-diagnostic](https://www.xenonstack.com/hubfs/dataops-reimagined-banner-image.svg) ✕ ## Agentic GRC - Monitoring Risk and Compliance Controls AI continuously checks controls and compliance posture. It detects misconfigurations and risks before they escalate. Evidence collection becomes automatic and audit-ready - ![Controls Icon](https://www.xenonstack.com/hubfs/controls.svg)Continuous control checks across infrastructure and SaaS - ![Audit Icon](https://www.xenonstack.com/hubfs/audit.svg)Automated evidence collection for audits - ![Risk Icon](https://www.xenonstack.com/hubfs/risk.svg)Risk scoring and prioritized remediation recommendations [Explore Agent GRC](https://agentgrc.ai/) ![monitoring-risk-and-compliance](https://www.xenonstack.com/hubfs/enhanced-security-measures.svg) ✕ ## Agentic Finance and Procurement Intelligent Agents Financial and procurement workflows become proactive and insight-driven. Agents monitor spend, vendors, and contracts in real time. Approvals and sourcing decisions become faster and smarter - ![Visibility Icon](https://www.xenonstack.com/hubfs/visibility.svg)Real-time visibility into spend and commitments - ![Anomaly Icon](https://www.xenonstack.com/hubfs/anomaly.svg)Anomaly detection on invoices and vendor performance - ![Workflow Icon](https://www.xenonstack.com/hubfs/workflow.svg)Intelligent workflows for approvals and sourcing decisions [Optimize Finance & Procurement](https://www.xenonify.ai/) ![agentic-finance-and-procurement](https://www.xenonstack.com/hubfs/responsible-ai-aviators-banner-illustration.svg) ```json { "@context" : "https://schema.org", "@type" : "BlogPosting", "author" : { "@type" : "Person", "name" : "Navdeep Singh Gill", "url" : "https://www.xenonstack.com/insights/author/navdeep-singh-gill" }, "dateModified" : "2022-11-04T15:55:02.548Z", "datePublished" : "2022-10-28T04:00:00.000Z", "headline" : "Code-Splitting in ReactJs with Its Best Practices", "image" : [ "https://www.xenonstack.com/hubfs/xenonstack-code-splitting-in-reactjs.png" ], "mainEntityOfPage" : { "@id" : "https://www.xenonstack.com/insights/code-splitting-in-react", "@type" : "WebPage" }, "publisher" : { "@type" : "Organization", "logo" : { "@type" : "ImageObject", "url" : "https://www.xenonstack.com/hubfs/Xenonstack-Serives%20-3-2-2021-10.png" }, "name" : "Xenonstack Inc" } } ``` ```json { "@context" : "http://schema.org", "@type" : "Organization", "address" : { "@type" : "PostalAddress", "addressCountry" : "USA", "addressLocality" : "Plano", "addressRegion" : "Texas", "postalCode" : "75024", "streetAddress" : "7700 Windrose Ave. " }, "description" : "XenonStack is the #1 Data and AI foundry and technology services company to simplify and scale Enterprise and Generative AI Journeys.", "email" : "business@xenonstack.com", "logo" : "https://f.hubspotusercontent30.net/hubfs/8161231/Xenonstack-Serives%20-3-2-2021-10.png", "mainEntityOfPage" : { "@id" : "https://www.xenonstack.com/insights/code-splitting-in-react", "@type" : "WebPage", "description" : "Code-Splitting in ReactJs with component-based separation Its Best Practices for CSS bundles splitting with in depth guide." }, "name" : "XenonStack", "sameAs" : [ "https://www.facebook.com/XenonStack", "https://www.linkedin.com/company/xenonstack/", "https://www.youtube.com/c/XenonStackOfficial", "https://twitter.com/xenonstack" ], "telephone" : "", "url" : "https://www.xenonstack.com/" } ```