我应该使用 react-loadable 还是 loadable-components 进行代码拆分？

Question

I want to split my react code with server side rendering. To do that I have two options.

• loadable-components
• react-loadable

loadable-components

React documentation suggested to use loadable-components for server rendered apps. But it has very few NPM weekly downloads.

react-loadable

NPM weekly downloads of this package is very high compared to the previous one but according to loadable-components documentation this package is not maintained any more.

react-loadable was the recommended way for React code splitting for a long time. However, today it is not maintained any more and it is not compatible with Webpack v4+ and Babel v7+. Documentation Link

Please guild me with proper package.

Answer 1

Even though documentation of react-loadable says that react-loadable is not compatible with Webpack v4+ and Babel v7+, I used react-loadable and it worked. I did not face any issue in both server and client side rendering applications.

Answer 2

FWIW loadable-components is recommended by the React team

Also, React.lazy does not currently support SSR (as of May 2020)

Answer 3

you can use React.lazy . This will automatically load the bundle containing the OtherComponent when this component gets rendered.

React.lazy takes a function that must call a dynamic import(). This must return a Promise which resolves to a module with a default export containing a React component.

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

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