Code Splitting

Code Splitting is must to have a feature for performance oriented large web application.

To avoid winding up with a large code bundle, it’s good to get ahead of the problem and start “splitting” your bundle. it speeds up the loading of your application and reduces the payload size of your application.

Oreact is using Webpack and Loadable Components for splitting a code. They also work with SSR.

loadable

loadable lets you easily import components and reuse it in your code.

In a React application, most of the time you want to split your components. Splitting a component implies to be able to wait for this component to be loaded but also to handle errors.

Component Splitting

import loadable from '@oreact/core/loadable';

const OtherComponent = loadable(() => import('./Component'), {ssr: true});

export default () => {
    return (
        <div>
            <OtherComponent />
        </div>
    )};

Oreact build process create a separate chunk file for Component.js. Loadable import is using dynamic imports approach, You can think of dynamic imports as another way to split your code into manageable chunks.

Sometime say No to SSR

You may not always want to include a component on server-side, For example, when the module includes a library that only works in the browser.

To disable server side rendering for any specific component, Simply set ssr option to false.

import loadable from '@oreact/core/loadable';

const OtherComponent = loadable(() => import('./Component'), {ssr: false});

export default () => {
 return (
     <div>
         <OtherComponent />
     </div>
 )};