🍿 Lazy loading

#webdev #beginners #react #programming

An essential task of bundler(vite, webpack, parcel) is bundling. What does that mean? This means it takes all the files and bundles all of them into one big ass file. What's the problem then? The problem is that the size of that one file will significantly increase. The app will be very slow as the development build is involved.

So, how to tackle this issue? We need to break down our app into smaller logical chunks. How to make smaller bundles and when to make them? What should be there is a small bundle? If I do logical separation, Over here in makemytrip, it is very clear that I can make components just for my flights, Homestays, Hotels, and Holidays.

A bundle should have enough features for the central part of our app. How to do that? There are different names for this concept. This (Lazy loading) process is also known as

Chunking
Lazy Loading
Code Splitting
Dynamic import
Dynamic bundling
On-demand Loading

These are the same thing.

Problem: Suppose our app has home, about, and contact components. The home component loads when the initial render happens. Nothing special! But, the app requires a particular functionality: the about and contact components will be rendered only when requested.

Solution: Lazy Loading 🍿

See the full code →

Steps: Implement Lazy loading

Step 1:
We don't use the traditional import approach when we import those two components(about contact). Rather, we'll do something like this:

//app.js
import React, { lazy} from "react";

❌import About from "./components/About";
❌import Contact from "./components/Contact";

✅const About = lazy(() => import("./components/About"));
✅const Contact = lazy(() => import("./components/Contact"));

Step 2:
<Suspense> lets you display a fallback until its children have finished loading. If you don't use it then react will throw you an error. Wherever we invoke a lazy loading component, we must wrap that into <Suspense> Just like this:

<Suspense fallback={"Loading..."}>
  <About />
</Suspense>

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.