Leveraging code-splitting in React Apps

Glenn Reyes speaking at viennaJS in May, 2017
1427Views
 
Great talks, fired to your inbox 👌
No junk, no spam, just great talks. Unsubscribe any time.

About this talk

Code-splitting allows you to split your code into separate bundles which you can load them on demand. How do you do it? Why is it useful? How would you do it in React? Answers to these questions and more in the talk.


Transcript


- Hi, my name is Glenn, and I'm gonna talk about leveraging code-splitting in React Apps. That's my Twitter handle, Glenn Reyes without the vowels. Hands up in the air, who has, who knows about code-splitting? Who has used it ever in some apps? And who use it in every app, like who used it as a first class exam? Oh, nice So, let's talk about what's code-splitting. Code-splitting actually it allows you to split your code into separate bundles which you can load them on demand. In fact, instead of having a big monolithic bundle, you can split it up into several bundles and load it as you need them, actually. Specific from your view, and why would you, what would you want to code-split actually? So, we are working on super fast, fibre internet power computers who never experienced websites that look like that in the first, but, if you're somewhere else, for example, in Africa, where if we look at that internet, you experience very, you're thinking, come on website, can you just start now, and it doesn't work. And, what you actually want to do is, you want your code, you want to load your code as needed. You don't want to load code in your specific view, where it's actually not needed. So that's why we want to do the code-splitting. And also, at this times, we are not actually surfing very much at computers right now. Most people, there's a trend where most people, it's turning more into a mobile trend. So, definitely consider that as well while you're developing your apps. So how do you actually code splits? Well, there is a new TC39 proposal which is called The Dynamic Import. And it's actually, instead of importing modules with import something from something, you can use import as a function, that looks kinda like this as a difference. And so it's in the Synchronous way, you would say, import Newsfeed from ../Newsfeed, and it would import your module synchronous lead. Means as soon as it do that, it's there in your bundle, regardless of which page you are, so it's loaded everywhere. In Asynchronous way, you could do that by import, then calling a function, passing the path to your module, and then it returns a promise, and with the promise, you could actually do whatever you want to do. In this case, I called to get HTML, to get a string of HTML with it, and put it to the inner HTML Newsfeed. So import is a new TC39 proposal, it's actually in stage three, so to use it now you would need a transpiler like Babble, and there is a plugin that's called syntax-dynamic-plugin. As I already said, it returns a promise, and if you use Webpack it's already supported in Webpack version two. And, yeah. How, I'm using React, but you can do it you could take the same idea on any other platform. So how would you do that in React? In React, you could probably use, or probably create a component, which is called AsyncLoad, and pass a prop. Pass a function to the prop, which cause the import. And to implement this, you would basically import React from 'react' and define the class. Create a state that has the AsyncComponent, which is default, which is not a default, and in the componentDidMount, lifecycle method, you could call your component, because you're passing a function, and then resolve the import actually, to get the module, and set the state to the AsyncComponent, and this basically loads, or this gives you the possibility to load, or to render the module as it's there. So in the render manifold you would basically create declare these variables, like that it's loading, for some loadings, and props, and AsyncComponent from the state, and if the AsyncComponent is there, if it's not null, then you would render the element AsyncComponent and spread the props to the component. And if it's still loading, you could load a loading spinner, and if it's either one of those, you just return null. You basically instead of calling the Newsfeed element, you could just AsyncLoad the Newsfeed. So there's some useful patterns about code-splitting, which is when you start to improve your performance or pitch speed, you should definitely consider vendors, like longterm caching, it's like split your bundle, or, put your common modules together into one, and like it renders, and your other modules into your separate views. There is also a pattern that you want to split at Route level, or a Component level, depends on what type of thing you want to do it. For example, if you visit your profile page, you want just to load the code that's in your profile page, and if you click in the profile page to your bio tab, for example, you want to Asynchronious load all the code that is in the bio, biography tab, for example. And also consider what to code split. It is definitely, yeah, important. So there is some useful React packages you don't actually need to implement, like the AsyncLoad, which I would recommend. So there is a react-loadable, which I also have some things like pre-loading and and pre-fetching, and it's SSR, and there's also a react-async-component from ctrlplusb. And to recap, when you are building app, load just only what you need. Try to achieve that. It's not because it works on your computer. We want it to every computer, and it's easy. And there is a lot of page speed impacts if you try to do it, so definitely try it out. Thank you.