Current File : /home/opti/public_html/ezone-accounting.optisoft.com.ng/static/js/165.af72ed69.chunk.js
(this["webpackJsonpfuse-react-app"]=this["webpackJsonpfuse-react-app"]||[]).push([[165],{2643:function(e,n,a){"use strict";a.r(n);var t=a(118),s=a(194),c=a(1);n.default=function(){return Object(c.jsxs)(c.Fragment,{children:[Object(c.jsx)(s.a,{variant:"h4",className:"mb-24",children:"Code Splitting"}),Object(c.jsx)(s.a,{className:"mb-16",component:"p",children:"Code-splitting your app can help you \u201clazy-load\u201d just the things that are currently needed by the user, which can dramatically improve the performance of your app. While you haven\u2019t reduced the overall amount of code in your app, you\u2019ve avoided loading code that the user may never need, and reduced the amount of code needed during the initial load."}),Object(c.jsx)(s.a,{className:"mt-32 mb-8",variant:"h5",children:"Route-based code splitting"}),Object(c.jsxs)(s.a,{className:"mb-16",component:"p",children:["We are using ",Object(c.jsx)("b",{children:"React.lazy"})," function to dynamically import component.",Object(c.jsx)("br",{}),Object(c.jsx)("b",{children:"FuseSuspense"})," component is created to avoid the repetition of ",Object(c.jsx)("b",{children:"React.Suspense "}),"component defaults, which is used in the theme layouts.",Object(c.jsx)("br",{}),"Check out the examples below to see dynamically or regular way of importing the components."]}),Object(c.jsxs)("div",{className:"flex flex-wrap lg:-mx-4",children:[Object(c.jsxs)("div",{className:"w-full lg:w-1/2 lg:px-4",children:[Object(c.jsx)(s.a,{className:"mt-32 mb-8",variant:"h6",children:"Lazy Loaded Component:"}),Object(c.jsx)(t.a,{component:"pre",className:"language-jsx my-16",children:"\n export const AnalyticsDashboardAppConfig = {\n settings: {\n layout: {\n config: {}\n }\n },\n routes : [\n {\n path : '/apps/dashboards/analytics',\n component: React.lazy(() => import('./AnalyticsDashboardApp'))\n }\n ]\n };\n "})]}),Object(c.jsxs)("div",{className:"w-full lg:w-1/2 lg:px-4",children:[Object(c.jsx)(s.a,{className:"mt-32 mb-8",variant:"h6",children:"Regular Loaded Component:"}),Object(c.jsx)(t.a,{component:"pre",className:"language-jsx my-16",children:"\n import AnalyticsDashboardApp from './AnalyticsDashboardApp';\n\n export const AnalyticsDashboardAppConfig = {\n settings: {\n layout: {\n config: {}\n }\n },\n routes : [\n {\n path : '/apps/dashboards/analytics',\n component: AnalyticsDashboardApp\n }\n ]\n };\n "})]})]}),Object(c.jsx)(s.a,{className:"mt-32 mb-8",variant:"h5",children:"Code splitting the Redux reducers (Dynamically loaded reducers)"}),Object(c.jsxs)(s.a,{className:"mb-16",component:"p",children:["We created Higher Order Component ",Object(c.jsx)("code",{children:"withReducer"})," to load redux reducer before the component render.",Object(c.jsx)("br",{}),"You just need to pass the ",Object(c.jsx)("b",{children:"key"})," and the ",Object(c.jsx)("b",{children:"reducer"})," to the component."]}),Object(c.jsx)(t.a,{component:"pre",className:"language-jsx my-16",children:"\n import withReducer from 'app/store/withReducer';\n import reducer from './store';\n .\n .\n export default withReducer('analyticsDashboardApp', reducer)(AnalyticsDashboardApp);\n "})]})}}}]);
Mini Shell