Code Splitting Made Simple

Published: 10 January 2022
on channel: Jack Herrington
46,883
1.7k

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  
👉 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


On this page of the site you can watch the video online Code Splitting Made Simple with a duration of hours minute second in good quality, which was uploaded by the user Jack Herrington 10 January 2022, share the link with friends and acquaintances, this video has already been watched 46,883 times on youtube and it was liked by 1.7 thousand viewers. Enjoy your viewing!