Code Splitting#

Code splitting is a common way to optimize frontend resource loading. This article will introduce the three types of code splitting supported by Modern.js:

• dynamic import
• React.lazy
• loadable

Dynamic import#

use dynamic import(), the JS modules pass to this API will be bundled as a separate JS file, for example:

import('./math').then(math => {
  console.log(math.add(16, 26));
});

React.lazy#

The officially way provides by React to split component code.

import React, { Suspense } from 'react';

const OtherComponent = React.lazy(() => import('./OtherComponent'));
const AnotherComponent = React.lazy(() => import('./AnotherComponent'));

function MyComponent() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <section>
          <OtherComponent />
          <AnotherComponent />
        </section>
      </Suspense>
    </div>
  );
}

For details, see React lazy.

Loadable#

In Modern.js, you can use the Loadable API, which is exported from @modern-js/runtime/loadable. Here's an example:

import loadable from '@modern-js/runtime/loadable';

const OtherComponent = loadable(() => import('./OtherComponent'));

function MyComponent() {
  return <OtherComponent />;
}

With the out-of-the-box support of loadable in SSR by Modern.js, you no longer need to add Babel plugins or inject scripts into HTML during SSR.

However, it's important to note that any Loadable API in SSR does not support the use of <Suspense>.

For details, see Loadable API.