react-universally-skinny
react-universally-skinny copied to clipboard
ctrlplusb
A "when size matters" adaptation of the react-universally boilerplate.
DEPRECATED
I am no longer managing this repo. I am instead looking to integrate a branch on the main repo.
Beware. This repo is out of date.
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 Name | Size (GZipped) |
|---|---|
| index.js | 72.9 KB |
react-universally-skinny
| Chunk Name | Size (GZipped) |
|---|---|
| index.js | 37.4 KB |
BOOM, 48% 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
ctrlplusb