shavo007 / react-boilerplate

React boilerplate with webpack and babel best practices

React boilerplate with ubers design system

Showcases react, react router and lazy loading with webpack

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 by calling yarn storybook

Code splitting by route and dynamic imports

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
• Cost of javascript
• Tree shaking