ReactJS: Code Splitting Explained

what is up guys it is Barry Michael Doyle here and in this video I am going to be talking about code splitting I'll be telling you why it's useful and I'll be showing you how to implement it in an existing project that I have it would be quite a basic example because I want to show you how easy it is to actually implement and actually discuss the benefits of using it so let's head over to my example project so I can show you how it might be useful to you alright guys so here we are in an app that I've been working on in my live streams it's very simple at the moment basically you have a contestants it's a contestant leaderboard kind of page but we we have a few pages in here there's a contestant page a home page and a login page and we also have a route for if nothing was found so that's something too but we'll deal with that later anyways what we're actually looking at is we have a contestant page login page home page all of these pages are here in my directory contestants home and login and there's there's nothing too useful to to see within that if we look at our app here we've got the home page which just pretty much shows you a bunch of details I actually have to log out it shows you a bunch of things I have a friend working on this at the moment so he might add records and stuff but if you click on a person you'll go to their contestant page and you can go back to the page here I know it's nothing beautiful but it's just an example there's that page the home page here the contestant page and if you were to log in so that you could add people you'd get to this login page but pretty much like we have three pages here and if you can think about it I want to explain this this use of code splitting so imagine code splitting like this when you come to a react website or a react app that you you're coming to you have to download a whole bundle so let's imagine this is your your big bundle that you're downloading and and this is your app right here now there might be parts of your app that you're your person might not see your user might just not see that the app so let's imagine like this forms the homepage and this forms the login page and then this forms the contestant page and like this can form some of the core of the app now instead of making the user download the whole the whole app bundle we can just make them down to the core and whatever page they're on so what you'd essentially do is because I'm using the routes as an example we would have to lazy load these components in and render some fallback for while these components are being loaded in so obviously we need to we automatically going to fetch like the whole core of our app so that part we've sorted with let's just name it whole bundle and then we have like home page login and consistent because we're looking at contestant and then this is done here's is like coal so coal will always be downloaded automatically just like normally the whole bundle would be downloaded automatically but in order to implement some setup where we just done at the core which happens automatically we need to basically split how we're going to download home login than contestant and we'll only download them on command so in order to do this you use two components from reactor the one is called lazy which allows us to lazily fetch our components and the other one is called suspense which we need to wrap our lazy components so react knows how to deal with them now the way to lazy load a page is pretty simple you just say Const page equals lazy and then you make a callback to import the page that you want to load so you can import like I don't know from pages slash default if you wanted to I'm in this route here and I'm just going back and fetching my pages so we can do that with all of these we can do it with contestant page and get our contestant from that page there so everything is good there and we can we could do the exact same thing with home and login so I'm just going to actually copy this say home page and get it from home and I'll do the same thing with login and get log in page from pages slash login now this would work but the one thing we're missing is react doesn't actually know that we need to specifically handle these these lazy loaded stuff so the problem is it will try and fetch this nor ballmart and say like the student work because it wasn't found so what we have to do is wrap the components that we're lazy loading in with suspense now these are the three components that are being lazy loaded in this one is part of our core so we don't have to worry about wrapping that in suspense so I'm gonna wrap in our suspense tag over here and we're gonna close it now this is pretty good but we also need to render some sort of fallback so in here I'm gonna write fallback and here I'm just gonna render a simple div that is loading page because we're fetching the specific page now this is actually all you need to get going with lazy loading I think it's freaking out here for some weird reason I don't actually know why why are you freaking out homepage all that stuff login page contestant page it's because I've forgot to remove these right so now this this is a app that's it's lazy loaded it is working supposed to be pages not page again making errors in the middle of this wonderful tutorial that I'm trying to make but yeah app runs now and if we were to refresh it says loading page there first so that's pretty perfect if we go here it's a loading page immediately and now here's an example if we go back it didn't have to say a loading page anymore we haven't got to log in yet so we hit here it quickly said loading page and and then we got to the login page but now that all the components all of those little bundles have been loaded we can go between pages without without any worrying about loading pages so it's just the initial load and essentially what this does is now that we don't have to download the whole bundle anymore we just download things on demand so the core gets downloaded immediately we need to download that so that we can you know get our app at its initial state so that we have this we have our return all that and switches and stuff done but we have decided like okay so the user will download the core they need to get the call that's important now the reason we split our stuff at our roots is because what if the user never goes to the login page we don't need to load that login page unnecessarily or what if they never go to the contestant ID page there they all like you know might just not have to worry about I mean essentially we could assume that they're always going to go to the home page so we could load just the home page but what if they use the app and/or then they got a link from someone that was linking to their contestant ID so what if they went directly to the contestant page and didn't actually see the home or login page it would be better to show them something up front first and then just download the extra little bits of the components as we need them now it's a common practice to start with doing this on your routes to lazy load all your routes because that's where most of this change is gonna happen like a user will most likely not go into all of your routes you can see that in most website analytics they don't go to every route they just go to like three out of five or something like that though they'll go to like one or two routes so they don't need to download your entire app now you can do this at a higher level or lower level if you wanted to say maybe like you're just going to the login page of an app and there is no public page you don't want to load the whole app until they've actually successfully logged in so you can make the login loading go much quicker by not loading the whole rest of the app and and kind of just load things on demand as the user needs them let's say you had a page that had a lot of different views in it you might not use all the views so rather just wrap all those views in the suspense and they will only get loaded as you require them and bear in mind this works quite nicely because let's say as I show you the example you've loaded the home page then you go to the login page so you load the login page if you go back to the home page it doesn't have to reload the home page it just has the home page as its because you've already loaded it all in and it's saved in the cache so that's just one of the wonderful things about this lazy loading technique this remains like if you refresh the browser it's not going to have to go and reload at all because it's loaded it before so it's just this nice little thing with making your react app much smoother in what doesn't actually end up being smoother you can put anything in you as the fallback but it's much quicker to download so it will take less time to download your whole bundle because you split the bundle up into smaller pieces so that's pretty much what code splitting entails I hope this is useful to you that you find it nice lots of people hear the word crazy bitching I think wow that's some advanced thing how am I ever gonna implement it but really it's not that difficult to implement so I hope you enjoyed the video I hope you learnt something quite useful and new and I hope that you are able to put this into practice with your projects out there anyways guys I'll catch you in the next video please do leave a like and subscribe if you enjoy it and yeah this does extend out quite far I mean you can kind of split your reducers and stuff if you were using redux there this goes quite quite far and beyond but there's different methods to it this is just an easy way to get started with it I hope you found this helpful and I will chat you gusy all the best Cheers

Channel: Barry Michael Doyle

Views: 7,981

Rating: 4.8928571 out of 5

Keywords: barrymichaeldoyle, barry michael doyle, reactjs, react code splitting, code splitting, code splitting explained, reactjs code splitting explained, react code splitting explained, code splitting routes, code splitting react, code splitting react router, how to implement code splitting, how to implement code splitting react, implementing code splitting in react, react lazy, react lazy loading, react suspense lazy, react suspense api, react suspense, react router lazy loading, react

Id: Ef3nvKLS4no

Length: 9min 34sec (574 seconds)

Published: Sun May 03 2020