Learn React & Material UI - #16 Optimizing Bundle Size
Hello guys, this next video is going to be all about reducing the footprint of your Material-UI applications. As always, we have our usual suspect, the exercise database SPA, which I've put up in its own repo on GitHub for your convenience https://github.com/alex996/react-exer... Be sure to check out the readme as it has a myriad of gems, including resources and instructions to get you up to speed.
If you've been following along for the past 15 episodes, you'd need to go ahead and make sure you watch the previous video titled "Deconstructing Create-React-App with Webpack 4 & Babel 7" • Deconstructing Create-React-App with ... Not only is it a pre-requisite for today's episode, but it's also a must watch for converting your create-react-app into a fully customized project with bleeding-edge tools like Webpack 4 and Babel 7 to squeeze the most performance out of your single-page app.
Once you went through the ramp up and are ready to venture off into today's topic, go ahead and clone the spa/unoptimized repo from https://github.com/alex996/react-exer... You'll note that it has not only the starter code, but also a readme that goes through every single optimization technique from this video in great detail. Be sure to read it, especially if you get stuck or need help.
To recap, this video will walk you through the steps of minimizing the bundle size of your app by up to 20%. The best part is you won't need to touch a single line in your source code, because all optimizations will only target the tooling in our build chain. Our objective is to bring down the footprint, as well as speed up the load time. Among others, this video will teach you how to
1. 03:33 selectively bundle only those polyfills that our code relies on
2. 05:57 rewrite import paths without the overhead of unwanted modules
3. 15:26 configure caching to enable cache busting on production deployments
4. 17:05 strategically analyze your bundle size with visualization tools
5. 21:23 tree shake ES modules and significantly cut down on the bundle size
Here are some resources you'll find useful:
Minimizing Bundle Size in Material-UI https://material-ui.com/guides/minimi...
Reducing JavaScript Payloads with Tree Shaking https://developers.google.com/web/fun...
useBuiltIns in @babel/preset-env https://babeljs.io/docs/en/babel-pres...
Caching in Webpack https://webpack.js.org/guides/caching/
NormalModuleReplacementPlugin https://github.com/mui-org/material-u...
And if you want to stay in touch, hit me up on Minds https://www.minds.com/CodeRealm
Watch video Learn React & Material UI - #16 Optimizing Bundle Size online without registration, duration hours minute second in high quality. This video was added by user Code Realm 09 September 2018, don't forget to share it with your friends and acquaintances, it has been viewed on our site 15,97 once and liked it 24 people.