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

James Gillmore
Jun 8, 2017 · 13 min read
Image for post
Image for post
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.

Reactlandia

The React Stack: Idiomatic Javascript in Reactlandia

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store