A high performance react boilerplate
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.babel
.vscode
.webpack
app
assets
common
config
server
.babelrc
.eslintignore
.eslintrc
.gitignore
.nvmrc
LICENSE
README.md
package-lock.json
package.json
postcss.config.js
webpack.config.js

README.md

High Performance React Boilerplate

A react boilerplate aiming to achieve best loading performance possible while also providing necessary tools needed for developing a website.

Live Demo

My website avcs.pro is built based on this Boilerplate.

AvcS Pro Performance

Features

So Meta

Not Now

  • async HOC to fetch asynchronous data on component load.

Size Matters

  • Minification and gzip compression for css, js, html and static files.

Quality over Quantity

  • PurgeCSS to get rid of all unused css from the bundled css files.
    • If you are using React components from node_modules, you might need to whitelist those.
  • Load js plugins in such a way that, unwanted js files are not imported in the bundled js files.
    • Using import Router from 'react-router/Router'; instead of import { Router } from 'react-router'; ensures that all the modules required inside index.js of react-router are not included in bundled js files.

Divided we Stand

  • getLoadableComponent, a wrapper over React Loadable for code splitting.
    • Two priority levels for rendering loadable components in server side.
    • Add ! at the beginning of component path to defer the loading of component to client side. If there is component in page which is not needed immediately and you dont to wait until server renders it, you can defer it to client side.

Divide and rule policy

  • Render initial page on Server side but all consecutive pages on Client side.
    • Server side rendering supports helmet, async and loadable components seamlessly.

Other Information

  • Uses webpack for building files.
  • Uses redux for state management.
  • Uses react-router for routing.
  • Uses Immutable.js inside async HOC.
  • Utility methods get and post.
  • get is isomorphic and caches the response unless asked to update by force.
  • Utility React Component ImmutablePureComponent.
  • Loads styles from css chunks inside style tags while rendering on server side.
  • Easy server setup using pm2.

Code Splitting

This boilerplate supports component based code splitting using React Loadable. Refer the link for documentation on how component based code splitting works and how to use React Loadable. You can use React Loadable directly or you can use the following wrapper module.

getLoadableComponent

getLoadableComponent accepts module path as first argument and other options as second parameter. The first parameter is replaced with respective options for React Loadable by babel plugin.

getLoadableComponent('/path/to/module', extraOptions);

is replaced with

getLoadableComponent({
    loader: () => import('/path/to/module'),
    webpack: () => require.resolveWeak('/path/to/module'),
    modules: ['/path/to/module']
}, extraOptions);

Multi level code splitting on server side rendering

If the module path starts with !, it will not be preloaded while rendering on server side, giving you two level code splitting.

Example Use Case:

In a page with heavy graphs or table or svg, you can render surrounding content in SSR and the heavy part can be rendered on client side. This won't affect the modules when rendering on client side.

Loadable by Comment

If you like clean code and you don't want to call React Loadable or getLoadableComponent everywhere, you can make a component Loadable by just adding a comment in the first line.

If you write a comment with @loadable in the first line of a component, all import statements importing this component will be converted to React Loadable Components by babel plugin. You can add keyword low after a space if you do not want to render it on the server side.