Minimizing Bundle Sizes in React

How to Minimize Bundle Size in React?
In this screencast, we’ll be looking at how to speed up your React app by shrinking JavaScript bundle sizes. By the end of this screencast you’ll be able to configure Webpack to minimize how much data your users need to download.
Watch more screencasts by Big Nerd Ranch on The Frontier
thefrontier.bignerdranch.com/...

[@the_not_so_dark_knight]

point to point and efficient ty

[@akashnag3879]

thank you very much...

[@lukasmuller2737]

Nice video, short but sufficient 👍

[@muhammadnasir9515]

you try this @lukas?

[@christianangelomsulit3759]

What's the changes in package.json?

[@martingruebler443]

very good

[@lvleminckx]

Nice video. Question that immediately pops to my mind : are all those optimizations built in the create-react-app boilerplate ? (i'll check that eventually)

[@muhammadnasir9515]

Where is github repo?

[@S4LTYT]

hello sir . how we can make three files webpack dev prod and common and attach to our react app like you are doing

[@jannismorgenstern7842]

There is a module called webpack-merge: www.npmjs.com/package/webpack-merge

[@xtheory9640]

1. Node_env production mode
2. plugin (uglyfyjs)
3. tree

[@neeraja3875]

setting webpack.DefinePlugin() option not reducing the bundle size.

[@sathvikreddy3573]

same here. were you able to figure out why?

[@theroyal1914]

I am subscribe you now, I will try it latter. 😅

[@aaron___6014]

Didn't reduce the size of my bundle.
use: {
loader: 'babel-loader',
options: {
presets: [
['@babel/preset-env', {'modules': false}],
'@babel/preset-react',
],
},
},

[@josephcoyle8126]

You may be able to set Webpack mode to "development", build, then use DevTools to inspect sources--the comments near the top of the code should specify if a module will be kept/removed. Code Radiance has a video on Tree Shaking which shows how to do this

[@atif5752]

Everyone must read this if webpack.definePlugin not working:
reactjs.org/docs/optimizing-performance.html#webpack