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!

Code: https://github.com/jherr/code-splitti...

👉 I'm a host on the React Round Up podcast: https://devchat.tv/podcasts/react-rou...
👉 Don't forget to subscribe to this channel for more updates: https://bit.ly/2E7drfJ
👉 Discord server signup: Discord: discord
👉 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

• #science_technology
• #code_splitting
• #jack_herrington_code_splitting
• #code_splitting_react_js
• #code_splitting_made_simple
• #react_default_exports
• #react_named_exports
• #reactlazy_and_suspense
• #react_loadable_components
• #async_loaded_react_components
• #imports_using_asyncawait
• #controlling_chunk_names
• #webpack_5_code_splitting
• #module_federation_code_splitting
• #blue_collar_coder
• #code_splitting_in_webpack
• #code_splitting_in_react
• #wrapping_async_loaded_react_components
• #react_code_splitting