Code Splitting

In order to not overwhelm the users with large browser bundles we recommend code splitting so that only appropriate components when they are needed. This can be done with large libraries as well. We use @loadable/component to handle our code splitting. Here is a basic example:

Copy

Copied

import loadable from "@loadable/component";
const OtherComponent = loadable(() => import("./OtherComponent"));
function MyComponent() {
  return (
    <div>
      <OtherComponent />
    </div>
  );
}

For more examples and the full API please see the Loadable Component Docs