Code Cracked for Code-Splitting + SSR in Reactlandia: React Universal Component + Webpack Flush Chunks and more

James Gillmore
Jun 8, 2017 · 13 min read
webpack-flush-chunks: use this shit!
import { flushModuleIds } from 'react-universal-component/server'
import flushChunks from 'webpack-flush-chunks'

const app = ReactDOMServer.renderToString(<App />)
const { js, styles } = flushChunks(webpackStats, {
  moduleIds: flushModuleIds()
})

res.send(`
  <!doctype html>
  <html>
    <head>
      ${styles}
    </head>
    <body>
      <div id="root">${app}</div>
      ${js}
    </body>
  </html>
`)


THE STORY


AND SO WEBPACK-FLUSH-CHUNKS WAS BORN


MOTIVATION: THE PAST PROBLEMS /w CODE SPLITTING


SOLUTION


NEXT: CSS

MORE

REACT UNIVERSAL COMPONENT

import universal from ‘react-universal-component’

const UniversalComponent = universal(() => import(‘./Foo’), {
  loading: Loading,
  error: Error,
  timeout: 15000,
  minDelay: 300,
  chunkName: ‘myChunkName’,
  onLoad: module => replaceReducers({ ...reducers, module.bar })
  key: ‘Foo’ || module => module.Foo,
  path: path.join(__dirname, ‘./Foo'),
  resolve: () => require.resolveWeak('./Foo')
})

export default ({ isLoading, error }) =>
  <div>
    <UniversalComponent isLoading={isLoading} error={error} />
  </div>

CONCLUSION

PS.

> For more idiomatic javascript in Reactlandia, read:

Reactlandia

The React Stack: Idiomatic Javascript in Reactlandia

James Gillmore

Written by

http://www.faceyspacey.com + http://twitter.com/faceyspacey

Reactlandia

The React Stack: Idiomatic Javascript in Reactlandia