Code Splitting Made Simple

Показать описание

Let's take a bite out of these huge React applications by learning how to asynchronously load static data, functions, React component from our own application and even other applications!

👉 VS Code theme and font? Night Wolf [black] and Operator Mono
👉 Terminal Theme and font? oh-my-posh with powerlevel10k_rainbow and SpaceMono NF

0:00 Introduction
0:37 Building The Home Application
1:28 Async Importing Default Exports
3:41 Async Importing Named Exports
5:20 Controlling Chunk Names
6:44 Imports Using Async/Await
7:49 Async Loading React Components
9:42 Manually Wrapping Async Loaded React Components
11:29 Using React.Lazy
13:15 Using Loadable Components
13:36 Creating The Product Application
15:13 Loading Default Exports With Loadable Components
16:17 Loading Named Exports With Loadable Components
17:59 Loading Components From Other Apps With Module Federation
27:03 Summary

#reactjs #webpack #moduleFederation

Рекомендации по теме

Комментарии

Amazing video, please continue covering topics like this. I feel like once channels get bigger they focus on content that is accessible to broader audiences and it's all just intro to this and that instead of advanced topics. Your's is one of the few channel's that produces quality content for people not on the beginner level.
Bought your book to support, good stuff as well.

Nomak

Jack, thank you for what you're doing! You're such an incredible teacher! I can clearly see that huge experience and wisdom that you posses ( btw I've been software engineer for 7 years) . What a luck to have you!

sanzhar.danybayev

You are one of the best teachers of React. So much clearer than many others. Your font size is perfect and large enough and love the split screens.

Don't think I can ever approach your level of mastery of React no matter how many years. Some people just think logically and some are more right brained.

Thanks for your tutorials and I am a subscriber.

theworld

Thanks Jack! +1 subscriber as soon as I saw "advanced frontend" in your YouTube banner, .
One small suggestion, if you could create a playlist named like "advanced frontend" or "junior to intermediate frontend", to cover these kind of topics that we must have to level up our frontend game.

pratamaa.s.

Thanks Jack. This really helped me understand and clarify a few things that I was struggling with. Seeing it in practice with your explanations really helps filling in the gaps.

marcelsdev

If you want to store a React.FC in a useState, you don't need a fancy wrapper class -- just need to wrap it in an anonymous function, as in `const [myComponent, setMyComponent()] = useState( () => () => <div>Loading</div>); setMyComponent(() => () => <div>My component has arrived</div>) ` The reason this broke your first example in the "manually wrapping async loaded react components" section is that setState allows you to lazily set the state (i.e. in case the default value is expensive to calculate) so it lets you set the state (either initially or later with the provided setter) by giving it a function that will eventually return the state -- which it will only call once (e.g. so the initial state doesn't get calculated durning every render cycle). Plus `setState( () => MyComponent)` is much easier to remember than

jasonthorpe

damn I have been doing react for little over 3 years now, but every video I learn something new

RachidBoudjelida

Thank you very much for the always great tutorials! I didn't know about the loadable components library and it looks really useful! One small remark - at 06:15 renaming the Webpack chunk to a fixed string called 'utilities' is not optimal for cachebusting because if the utilities file changes the user will have to clear the browser cache to get the new change.

alex-vukov

you the gem
i really thought that i can not do any thing.
my collegues are doing exciting things and i don't know how to learn them
then what luck to have you
thank you love you .

waqasrana

That IS a gorgeous header! No wonder the product team wanted a piece of that action 😄

mkman

Very Informative Video! Please keep doing more videos

kalyan

I've seriously learnt a lot from this! Is there a TS example of the `loadComponent` function that you've created?

BarryMichaelDoyle

Great stuff! Love the way you explain these core concepts

TavoZapata

I’ve been doing front-end dev for a quite a while, and finally have the opportunity to more forward-thinking work. Some of your explanations really clear up ambiguous concepts that are rarely expressed clearly.

(A friendly note about the intellisense tooltips that seem a little overly aggressive in showing their lovely help text - they often obscure the code you’re trying to show, and in really bad cases instill a feeling of inexplicable anxiety)

Mark_MKII