Skip to content

Instantly share code, notes, and snippets.

@glennreyes

glennreyes/code-splitting-notes.md

Created April 30, 2017 21:28
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save glennreyes/8561dc3a756b1900ccde7935147a0ad2 to your computer and use it in GitHub Desktop.
Save glennreyes/8561dc3a756b1900ccde7935147a0ad2 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
code-splitting-notes.md

Leveraging code-splitting in React apps

Why consider code split?

  • Imagine regular 3G connection on mobile devices
  • Seconds until first meaningful paint?
  • Mobile trend

How?

  • Explain import();
  • Example import();

How in React?

  • Simple example <MyLazyComponent getComponent={() => import('./Profile')} />

Patterns

  • Consider vendors (longterm caching, eg. in webpack)
  • Splitting at Route & Component leve (add some graphs)
  • Consider what to code split (common React components, smart/dumb)

Recap

  • Load only what needed
  • It's easy & huge performance benefits
  • etc.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment