Google+
4elements web design & consultancy

4elements

Blog

  • like 2 15

    Dramatically Speed Up Your React Front-End App Using Lazy Loading

    4elements | web design Den Haag blog • Dramatically Speed Up Your React Front-End App Using Lazy Loading

    A constant challenge faced by front-end developers is the performance of our applications. How can we deliver a robust and full-featured application to our users without forcing them to wait an eternity for the page to load? The techniques used to speed up a website are so numerous that it can often be confusing to decide where to focus our energy when optimising for performance and speed.

    Thankfully, the solution isn't as complicated as it sometimes might seem. In this post, I'll break down one of the most effective techniques used by large web apps to speed up their user experience. I'll go over a package to facilitate this and ensure that we can deliver our app to users faster without them noticing that anything has changed.

    What Does It Mean for a Website to Be Fast?

    The question of web performance is as deep as it is broad. For the sake of this post, I'm going to try and define performance in the simplest terms: send as little as you can as fast as you can. Of course, this might be an oversimplification of the problem, but practically speaking, we can achieve dramatic speed improvements by simply sending less data for the user to download and sending that data fast.

    For the purpose of this post, I'm going to focus on the first part of this definition—sending the least possible amount of information to the user's browser. 

    Invariably, the biggest offenders when it comes to slowing down our applications are images and JavaScript. In this post, I'm going to show you how to deal with the problem of large application bundles and speed up our website in the process.

    React Loadable

    React Loadable is a package that allows us to lazy load our JavaScript only when it's required by the application. Of course, not all websites use React, but for the sake of brevity I'm going to focus on implementing React Loadable in a server-side rendered app built with Webpack. The final result will be multiple JavaScript files delivered to the user's browser automatically when that code is needed. If you want to try out the completed code, you can clone the example source code from our GitHub repo.

    Using our definition from before, this simply means we send less to the user up front so that data can be downloaded faster and our user will experience a more performant site.

    1. Add React Loadable to Your Component

    I'll take an example React component, MyComponent. I'll assume this component is made up of two files, MyComponent/MyComponent.jsx and MyComponent/index.js.

    In these two files, I define the React component exactly as I normally would in MyComponent.jsx. In index.js, I import the React component and re-export it—this time wrapped in the Loadable function. Using the ECMAScript import feature, I can indicate to Webpack that I expect this file to be dynamically loaded. This pattern allows me to easily lazy load any component I've already written. It also allows me to separate the logic between lazy loading and rendering. That might sound complicated, but here's what this would look like in practice:

    I can then import my component exactly as I normally would:

    I've now introduced React Loadable into MyComponent. I can add more logic to this component later if I choose—this might include introducing a loading state or an error handler to the component. Thanks to Webpack, when we run our build, I'll now be provided with two separate JavaScript bundles: app.min.js is our regular application bundle, and myComponent.min.js contains the code we've just written. I'll discuss how to deliver these bundles to the browser a little later.

    2. Simplify the Setup With Babel

    Ordinarily, I'd have to include two extra options when passing an object to the Loadable function, modules and webpack. These help Webpack identify which modules we should be including. Thankfully, we can obviate the need to include these two options with every component by using the react-loadable/babel plugin. This automatically includes these options for us:

    I can include this plugin by adding it to my list of plugins in my .babelrc file, like so:

    I'm now one step closer to lazy loading our component. However, in my case, I'm dealing with server-side rendering. Currently, the server will not be able to render our lazy-loaded components.

    3. Rendering Components on the Server

    In my server application, I have a standard configuration that looks something like this:

    The first step is going to be to instruct React Loadable that I want all modules to be preloaded. This allows me to decide which ones should be loaded immediately on the client. I do this by modifying my server/index.js file like so:

    The next step is going to be to push all components I want to render to an array so we can later determine which components require immediate loading. This is so the HTML can be returned with the correct JavaScript bundles included via script tags (more on this later). For now, I'm going modify my server file like so:

    Every time a component is used that requires React Loadable, it will be added to the modules array. This is an automatic process done by React Loadable, so this is all that's required on our part for this process.

    Now we have a list of modules that we know will need to be rendered immediately. The problem we now face is mapping these modules to the bundles that Webpack has automatically produced for us.

    4. Mapping Webpack Bundles to Modules

    So now I've instructed Webpack to create myComponent.min.js, and I know that MyComponent is being used immediately, so I need to load this bundle in the initial HTML payload we deliver to the user. Thankfully, React Loadable provides a way for us to achieve this, as well. In my client Webpack configuration file, I need to include a new plugin:

    The loadable-manifest.json file will provide me a mapping between modules and bundles so that I can use the modules array I set up earlier to load the bundles I know I'll need. In my case, this file might look something like this:

    This will also require a common Webpack manifest file to include the mapping between modules and files for internal Webpack purposes. I can do this by including another Webpack plugin:

    5. Including Bundles in Your HTML

    The final step in loading our dynamic bundles on the server is to include these in the HTML we deliver to the user. For this step, I'm going to combine the output of steps 3 and 4. I can start by modifying the server file I created above:

    In this, I've imported the manifest and asked React Loadable to create an array with module/bundle mappings. The only thing left for me to do is to render these bundles to an HTML string:

    6. Load the Server-Rendered Bundles on the Client

    The final step to using the bundles that we've loaded on the server is to consume them on the client. Doing this is simple—I can just instruct React Loadable to preload any modules it's found to be immediately available:

    Conclusion

    Following this process, I can split my application bundle into as many smaller bundles as I need. In this way, my app sends less to the user and only when they need it. I've reduced the amount of code that needs to be sent so that it can be sent faster. This can have significant performance gains for larger applications. It can also set smaller applications up for rapid growth should the need arise. 

    martijn broeders

    founder/ strategic creative bij 4elements web design & consultancy
    e-mail: .(JavaScript must be enabled to view this email address)
    telefoon: 06 38 55 28 54
  • 1
    silhouette
    carris
    05 October, 2018 om

    This piece of writing presents clear idea designed for the new people of blogging, that in fact how to do blogging.

  • 2
    silhouette
    marissa
    03 October, 2018 om

    Great write-up, I am normal visitor of one's web site, maintain up the excellent operate, and It is going to be a regular visitor for a long time.

  • 3
    silhouette
    ena
    03 October, 2018 om

    As a Newbie, I am always exploring online for articles that can help me. Thank you

  • 4
    silhouette
    beth
    24 September, 2018 om

    Thank you for another fantastic post. The place else may just anybody get that kind of info in such an ideal way of writing? I have a presentation next week, and I'm on the look for such info.

  • 5
    silhouette
    joella
    22 September, 2018 om

    What's up, I log on to your blogs on a regular basis. Your humoristic style is witty, keep up the good work!

  • 6
    silhouette
    roberto
    17 September, 2018 om

    I was able to find good information from your articles.

  • 7
    silhouette
    kristin
    16 September, 2018 om

    There's definately a lot to know about this subject. I like all the points you have made.

  • 8
    silhouette
    iasjohnnie
    10 August, 2018 om

    Awesome job once again! Thumbs up:)

  • 9
    silhouette
    majortrejo47
    27 July, 2018 om

    Hi, just wanted to say, I liked this article. It was practical. Keep on posting!

  • 10
    silhouette
    charliefiller27
    19 July, 2018 om

    Wow, this piece of writing is good, my sister is analyzing these kinds of things, thus I am going to let know her.

  • 11
    silhouette
    demibooker30
    05 July, 2018 om

    Valuable information. Lucky me I discovered your web site unintentionally, and I am shocked why this coincidence did not took place in advance! I bookmarked it.

  • 12
    silhouette
    harlan
    05 July, 2018 om

    I am curious to find out what blog system you're using? I'm experiencing some minor security issues with my latest blog and I'd like to find something more safeguarded. Do you have any suggestions?

  • 13
    silhouette
    janinebrewer42
    04 July, 2018 om

    I'm very happy to read this. This is the type of manual that needs to be given and not the random misinformation that is at the other blogs. Appreciate your sharing this greatest doc.

  • 14
    silhouette
    joannabillups
    04 July, 2018 om

    Keep working, remarkable job!

  • 15
    silhouette
    toddboerner4378
    04 July, 2018 om

    I truly treasure your piece of work, Great post.

  • 16
    silhouette
    mahaliamatheson
    04 July, 2018 om

    Yay google is my queen assisted me to find this great site!

  • 17
    silhouette
    elvera
    03 July, 2018 om

    I went over this site and I think you have a lot of superb information, saved to bookmarks (:.

  • 18
    silhouette
    penny
    03 July, 2018 om

    What's up friends, fastidious post and fastidious urging commented at this place, I am in fact enjoying by these.

  • 19
    silhouette
    lenny
    01 July, 2018 om

    Useful info. Lucky me I discovered your site by chance, and I'm surprised why this accident didn't came about in advance! I bookmarked it.

  • 20
    silhouette
    lenny
    30 June, 2018 om

    each time i used to read smaller articles that as well clear their motive, and that is also happening with this article which I am reading at this place.

Per - categorie

    Op - datum