https://github.com/ctrlplusb/react-universally-skinny
A "when size matters" adaptation of the react-universally boilerplate.
https://github.com/ctrlplusb/react-universally-skinny
Last synced: about 1 year ago
JSON representation
A "when size matters" adaptation of the react-universally boilerplate.
- Host: GitHub
- URL: https://github.com/ctrlplusb/react-universally-skinny
- Owner: ctrlplusb
- License: mit
- Created: 2016-07-15T20:50:10.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2016-11-03T10:44:09.000Z (over 9 years ago)
- Last Synced: 2025-04-30T20:31:49.642Z (about 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 168 KB
- Stars: 30
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
### DEPRECATED
I am no longer managing this repo. I am instead looking to integrate a branch on the [main repo](https://github.com/ctrlplusb/react-universally).
Beware. This repo is out of date.
----------
React, Universally - Skinny
A "when size matters" adaptation of the react-universally starter kit.
## TOC
- [About](https://github.com/ctrlplusb/react-universally#about)
- [References](https://github.com/ctrlplusb/react-universally#references)
## About
This is an alternative version of [`react-universally`](https://github.com/ctrlplusb/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`](https://github.com/ctrlplusb/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`](https://github.com/ctrlplusb/react-universally)
| Chunk Name | Size (GZipped) |
|-------------------------------|------------------|
| index.js | 72.9 KB |
### [`react-universally-skinny`](https://github.com/ctrlplusb/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