Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including react-universally-skinny with all npm packages installed. Try it out:

var reactUniversallySkinny = require("react-universally-skinny")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

react-universally-skinny v4.0.0

A "when size matters" adaptation of the react-universally starter kit.

React, Universally - Skinny

A "when size matters" adaptation of the react-universally starter kit.

TOC

About

This is an alternative version of react-universally (a starter kit that contains all the build tooling and configuration you need to kick off your next universal react project, whilst containing a minimal "project" set up allowing you to make your own architecture decisions). Please reference the react-universally documentation for the features contained within this starter kit.

This adaptation of the starter kit attempts to provide you with as small as a client bundle size as possible whilst maintaining the equivalent features/functionality. It does so by making use of the amazing preact and preact-compat libraries.

Take a look at the differences in bundle size output...

react-universally

Chunk NameSize (GZipped)
main-cb2669ecf95d09720eb1.js70.6 KB
1-9aa9096e3fc8a0c2c097.js1.4 KB
0-caed1bc1f639ca595cb2.js1.0 KB

react-universally-skinny

Chunk NameSize (GZipped)
main-cb2669ecf95d09720eb1.js24.5 KB
1-9aa9096e3fc8a0c2c097.js0.861 KB
0-caed1bc1f639ca595cb2.js1.0 KB

BOOM, 60% size savings!

Of course these don't come without a cost. As we are using preact we have had to drop react-hot-loader and instead replace it with a native implementation of webpack HMR feature. You still have hot reloading, it's not as powerful, but it's probably good enough.

References

  • react-universally - https://github.com/ctrlplusb/react-universally
  • react-router v3 changelog - https://github.com/reactjs/react-router/blob/next/CHANGES.md
  • preact - https://github.com/developit/preact
  • Webpack 2 - https://gist.github.com/sokra/27b24881210b56bbaff7
  • React Hot Loader v3 - https://github.com/gaearon/react-hot-boilerplate/pull/61
  • dotenv - https://github.com/bkeepers/dotenv
RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free