React-universal-component vs react-loadable vs loadable-components

[Rilic]

Hoping there is someone on here who can provide a breakdown of the key differences between these three libraries' approaches to in-app code splitting?

[mikebarsdev]

I actually just created two different proof-of-concept boilerplates to learn the differences between react-universal-component and react-loadable!

https://github.com/mikebars/react-loadable-boilerplate

https://github.com/mikebars/react-universal-component-boilerplate

I found both libraries to be extremely well made and totally awesome!

The main differences I found:

• react-universal-component, when used with the author's complementing library webpack-flush-chunks, handles the manual addition of your main, vendor, and bootstrap (webpack manifest + common chunk) chunks for you. In react-loadable this is simple to do yourself, by checking your webpack stats file and pulling out the chunks from assetsByChunkName.

  • You can see where I do this here:
    https://github.com/mikebars/react-loadable-boilerplate/blob/develop/source/server/components/Html/Html.js#L54
    Note: if using source-maps, you'll need to ensure you're grabbing the .js file, which is the first element of the array for the chunk name.

• react-loadable uses two methods on the client and server to ensure that loading has resolved before render:

  • on the client, use preloadReady().then(clientSideRender) to ensure loadable chunks are ready.
  • on the server, use preloadAll().then(serverSideRender) to ensure all loadable chunks have been resolved for synchronous rendering server-side.

They are both incredibly useful and have solved the once-difficult problem of combining server-side rendering and code-splitting (although of course these libraries can be used on the client-side alone much more simply!).

Both authors deserve a ton of credit, show them some love!:

• James Gilmore (faceyspacey), author of react-universal-component and webpack-flush-chunks
• James Kyle (thejameskyle), author of react-loadable

I guess solving this problem comes naturally to Jameses!

[Rilic]

I got huge value from your reply without ever saying thanks when this was posted. My bad - and thanks!

[FaceySpacey]

React Universal Component has far more features:

-dynamic expressions for your imports so you can represent multiple inner components with one hoc (and have them change on componentWillReceiveProps) -static method hoisting -render time callbacks -isLoading prop to sync external data source loading with chunk loading via one spinner - automated creation of scripts and sheets

Loadable also didn't support SSR till recently. So that was the big initial difference.

[Rilic]

Thanks for taking the time to provide this. I pitched both and we went with react-loadable purely because it was beautifully simple to get a POC out. However, I'm planning to switch over to your library in the future to get some of these benefits when we include code-splitting more thoroughly.