How to optimize a React JS app bundle performance to load under 3s | Code splitting | Lazy loading
Vložit
- čas přidán 20. 10. 2019
- Tutorial on how to optimize React JS application performance to load in less than 3 seconds on a mobile connection using the simple Sliced Bread technique with React.lazy() and Suspense. This easy to learn approach often reduces bundle sizes, too. As a result, your application will consume less CPU and memory and will load faster than your competition. Full code samples below!
Modus has used this React performance optimization technique over and over again with Global Fortune 500 companies with incredible success. Our clients report better customer satisfaction and much better conversion rates (this means profit!) after adopting our approach to improve the speed of their web experience.
Baseline code: github.com/ModusCreateOrg/hog...
Suspense fix: github.com/ModusCreateOrg/hog...
Final code: github.com/ModusCreateOrg/hog...
Gimbal is a performance auditing tool for your CI and CLI. It protects your application from merging performance or accessibility damaging code. Powered by Lighthouse, Axe, Sourcemaps explorer, Chrome memory and CPU profiling, etc.
labs.moduscreate.com/gimbal-w...
Grgur on Social Media:
Twitter - bit.ly/2Q7Y5tv
LinkedIn - bit.ly/2PEEbqW
GitHub - bit.ly/2MaOVuU
Blog - moduscreate.com/blog
Subscribe to Modus Create CZcams Channel to get more insights about creating world-class web applications - / @moduscreate
Modus Create maintains an active blog on web development, customer experience, and product management. Check it out: moduscreate.com/blog
💼 Ready to transform your career? Modus is expanding and hiring!! Check out these positions and apply today!
Business Intelligence Engineer
grnh.se/be0df69d3us
Front End Engineer (JavaScript, Vue)
grnh.se/7972d0183us
Full Stack Engineer (React, Node, AWS)
grnh.se/5d581fa93us
Full Stack Engineer - LeaseUp Web Application - (React,Python,AWS)
grnh.se/608025fd3us
Front End Engineer (React,Ionic)
grnh.se/4ed1104e3us
Front End Enginer (Angular, Ionic)
grnh.se/23c3a35b3us
QA Automation (Python/Pytest)
grnh.se/6a118e423us
Modus Labs has open-sourced application code, libraries, and programming patterns as part of our research and development effort that we share with the world at labs.moduscreate.com
Modus Create is a disruptive consulting firm based on the model of an open-source team dedicated to making the best software on earth, and to leaving the world better than we found it. Together with our customers, we build products that empower people with breakthrough services and experience.
To find out more about the work we do, head over to our website.
moduscreate.com
#reactjs #performance #optimization #react #reactsuspense #reactlazy #reactbundle #codesplitting #lazyloading - Věda a technologie
Don't know how I missed this video all these days. Amazing explanation. Your reaction after seeing 100% performance results was hilarious. Thanks for the video.
Youre gonna be big. The way you explain things just blows my mind. 👍
Thank you for watching! Stay tuned for more videos.
this is really good, many talk too much, make you turning around for nothing, but he gave the upshot straightforward.
Amazing content, Modus! Thank you 💖
This is EXACTLY what I needed. Thanks x2
MAN WHAT YOU DID IS EXCELLENT
I'm glad you liked this, Kenneth! Thank you very much for supporting our work here 🙌
@@grgurgrisogono656 Keep up the great work 🙂. Looking forward for more awesome content.
Super helpful, this is gem of a content! Thanks for sharing!
thanks for this advanced useful tutorial
Awesome tutorial! Unfortunatly, lazy and Suspense aren't compatible (yet) with server-side rendering. Another video like this but with server-side rendering optimization would be even more awesome ! Excellent explanation for this video tho and keep up the work.
Thank you, it's really helpful
That's really amazing man !!
Thanks Ange ♥️
Thank you sir! You are the genius.
I don't know How can I thank you for this particular video. The way you import the named function is amazing and as I searched you are the only one guy who had explained it. Thank you soooooo... much. I really appreciate your this video. Lots of Love from India.
Thank you for watching!
Thank you so much for such wonderful feedback! I'd buy you a beer for this, made my day 😃Glad this was helpful to you!
Very good video. Subscribed. Thank you very much!
Many thanks, Kerim! It's great to have you in the community!
Great tutorial, neatly explained... keep coming with react videos bro... subscribed .. thanks again
Thank you for watching!
🙏 take a bow. This is what I exactly looking for. Will be combining this with NextJS 😉
Great explanation, thanks a lot !
Thank you for supporting this effort, Florian ❤️
Thanks for this master.
THANKS THANKS THANKS
Awesome sauce
Amazing!
What a well made video.
Goldmine, saving this offline.
Sad that this awesome tutorial is not much of a use to me at this instant. React.lazy and Suspense are not yet available for server-side rendering yet according to the React documentation. Love your way of teaching. This is the first video I have watched of you and am subscribing right now.
Thanks Mouni. And I hear you. It's sad that Lazy and Suspense are not fully supported in node. However, if all you need is pre-rendering (and not on-the-fly SSR) then puppeteer + headless chrome can be a fantastic alternative as your React app doesn't need to worry about APIs like Suspense or even useEffect.
@@grgurgrisogono656 Thanks, I will surely try this out the next time
nicely explained
amazing content
thank you sososososooo much
The disappointing silence after seeing the audit number is satisfying.
Thanks for such videos. Please make a video on How to handle React Router (Dom) for a large scale react application?
Sounds like a good idea. Do you have any particular issues that I could pay closer attention to?
This is great, I'd love to see the same use-case done using the loadable-components lib-it seems to provide better SSR capabilities than others. I'm currently having trouble replicating the framer-motion example, would be great to see how you'd approach it.
Thanks, Danny! You're right, some of these libraries like loadable-components, react-loadable and next/dynamic are much more comprehensive.
The framer-motion example uses named imports. A quick search showed that named imports might not be implemented through loadable-components yet. See this discussion: github.com/gregberge/loadable-components/issues/245
I would try to create a very simple abstraction by using regular static imports. For example, you could create a "motion.js" file and inside it, you could do this:
import { motion } from 'framer-motion';
export default motion;
Then you could use that reference everywhere else in the app like so:
await import('../abstracts/motion')
This would be my first attempt. Using abstracts is usually a great practice as it keeps things more maintainable. Imagine if an app had an abstraction point for moment.js, but at some point decided to switch to date-fns. Replacing abstraction (given that it's done right) is far easier than refactoring a big part of an app.
Sublime man
Thanks for watching!
Thanks! Can u make performance optimization tutorial for next js ?
Wow
logo from Olympics wakakakak
Hello, was a great and helpful video, so just about CSS files in react, I am using many CCS files, which are the steps or rules to perform CSS loadings in react?
Kind regards
There are many ways to handle CSS nowadays. I have two approaches that I like to implement.
1. Well-designed apps have clear design guidelines that can be implemented at a global level. Think Tailwind. The major pro is that you don't have to worry about conflicts and imports, but the con is that you load a bit more CSS than your app uses on the first render. That's why I feel the app has to have clear guidelines so that unused CSS isn't too large
2. If lots of customizations are needed for components, then I prefer CSS modules. They work beautifully with code-splitting so you can properly run the app with minimal CSS. However, occasionally you may see rule overrides when modules are re-imported in succession and specificity gets "corrupted". This is rare and can be avoided, tho.
Excellent content, question do you know if there's an additional config for make magic comments (Webpack) to work with react Lazy?
Thank you Fernando! The cool thing is that Webpack's magic comments will work out of the box, so long the app is built with Webpack. However, some webpack config may override - especially if you try to name chunks, but webpack optimizations are set to use a different strategy for chunk IDs.
Amazing content, I just think that "trick" to destructure the modules could become a Function to clean code.. imagine getting a lot of different modules?
My solution would be making a functions that accepts 2 parameters, `importFrom` (string) and `moduleName`(string) but i'm stuck on it.. because it seems i can't use variables to call paths and modules:
const getMemoizedPage = (importFrom: string, moduleName: string) => {
return lazy(() => import(importFrom).then(mod => ({
default: mod[moduleName]
})))
}
There is lint errors and Typescript Errors, and I can't understand why it's happening, either how to solve it.
what is audits please tell me in detail
Many thanks for the tips i understand the most part of this tutorial , i'm french , the second part it's difficult for me , may be because i'm just a junior dev . Can you give me your theme of VSC or your font ? Regards ;) susbscribed ;)
always trust a dude with 2 beards
You got it man! I worked hard on the 2nd one. When I grow up....
npx create-react-app for me does take tooo long only about 24........ hours (psst, im not joking)
9:50 is where he lazy loads
Good call! If you're lazy just hit that link!