Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/shavo007/react-boilerplate

React boilerplate with webpack and babel best practices
https://github.com/shavo007/react-boilerplate

babel circleci code-splitting eslint-airbnb prettier react storybook webpack

Last synced: 9 days ago
JSON representation

React boilerplate with webpack and babel best practices

Host: GitHub
URL: https://github.com/shavo007/react-boilerplate
Owner: shavo007
License: mit
Created: 2018-10-02T11:48:20.000Z (about 6 years ago)
Default Branch: master
Last Pushed: 2021-07-01T19:35:28.000Z (over 3 years ago)
Last Synced: 2024-10-11T22:55:33.302Z (26 days ago)
Topics: babel, circleci, code-splitting, eslint-airbnb, prettier, react, storybook, webpack
Language: JavaScript
Homepage:
Size: 4.55 MB
Stars: 2
Watchers: 1
Forks: 0
Open Issues: 13
Metadata Files:
- Readme: README.md
- License: LICENSE
- Codeowners: .github/CODEOWNERS

Awesome Lists containing this project

README

        # React boilerplate with ubers design system

> Showcases react, react router and lazy loading with webpack

[![CircleCI](https://circleci.com/gh/shavo007/react-boilerplate.svg?style=svg)](https://circleci.com/gh/shavo007/react-boilerplate)

[![Dependabot Status](https://api.dependabot.com/badges/status?host=github&repo=shavo007/react-boilerplate)](https://dependabot.com)

## Webpack optimizations

Enabled these plugins:

*  "babel-plugin-transform-imports"

* "babel-plugin-transform-react-remove-prop-types

* PreloadWebpackPlugin

Reports are generated using webpack-bundle-analyser and bundle-buddy

To run bundle buddy `yarn build && npx bundle-buddy dist/*.map`

## Bundlesize

Run `yarn check-size`

## Storybook

Run [storybook](https://storybook.js.org/docs/basics/introduction/) by calling `yarn storybook` 

## Code splitting by route and dynamic imports

![](img/code-splitting-demo.gif)

## Reading

- https://developers.google.com/web/fundamentals/performance/webpack/use-long-term-caching

- https://developers.google.com/web/fundamentals/performance/optimizing-javascript/code-splitting/

- https://github.com/malchata/code-splitting-example

- [Webpack optimizations](https://github.com/GoogleChromeLabs/webpack-libs-optimizations)

- [Cost of  javascript](https://medium.com/@addyosmani/the-cost-of-javascript-in-2018-7d8950fbb5d4)

- [Tree shaking](https://developers.google.com/web/fundamentals/performance/optimizing-javascript/tree-shaking/)