Can front-end lazy loading be played like this?

Can lazy loading be played like this?

Lazy loading is a technique for optimizing web page performance. It allows us to load resources only when needed, thereby improving page loading speed and user experience. Lazy loading can be applied to various scenarios, such as images, videos, audios, components, and routes. This article will introduce how to implement lazy loading for images and routes in React and Vue, and provide some code examples.

Image Lazy Loading#

Images are one of the most common and bandwidth-consuming resources on web pages. Loading all images at once can result in a long initial loading time, which may frustrate users. However, if we only load the images that are visible to the user and delay loading other images until the user scrolls to their positions, we can save bandwidth and improve user experience. This is the principle of image lazy loading.

In React, we can use the third-party library react-lazyload to implement image lazy loading. It provides a LazyLoad component where we can place the images that need to be lazily loaded and specify a placeholder image. This will achieve the effect of image lazy loading. For example:

import React from 'react';
import LazyLoad from 'react-lazyload';
import placeholder from './assets/placeholder.gif';

function App() {
  return (
    <div className="App">
      <h1>React Image Lazy Loading Example</h1>
      <div className="container">
        <LazyLoad height={200} placeholder={<img src={placeholder} alt="Placeholder" />}>
          <img src="https://picsum.photos/id/1/200/200" alt="Image 1" />
        </LazyLoad>
        <LazyLoad height={200} placeholder={<img src={placeholder} alt="Placeholder" />}>
          <img src="https://picsum.photos/id/2/200/200" alt="Image 2" />
        </LazyLoad>
        <LazyLoad height={200} placeholder={<img src={placeholder} alt="Placeholder" />}>
          <img src="https://picsum.photos/id/3/200/200" alt="Image 3" />
        </LazyLoad>
        {/* Other images omitted */}
      </div>
    </div>
  );
}

export default App;

In Vue, we can use the third-party library vue-lazyload to implement image lazy loading. It provides a v-lazy directive where we can replace the src attribute of the images that need to be lazily loaded with v-lazy and specify a placeholder image. This will achieve the effect of image lazy loading. For example:

<template>
  <div id="app">
    <h1>Vue Image Lazy Loading Example</h1>
    <div class="container">
      <img v-lazy="'https://picsum.photos/id/1/200/200'" alt="Image 1" />
      <img v-lazy="'https://picsum.photos/id/2/200/200'" alt="Image 2" />
      <img v-lazy="'https://picsum.photos/id/3/200/200'" alt="Image 3" />
      <!-- Other images omitted -->
    </div>
  </div>
</template>

<script>
import Vue from 'vue';
import VueLazyload from 'vue-lazyload';

Vue.use(VueLazyload, {
  loading: './assets/placeholder.gif', // Placeholder image
});

export default {
  name: 'App',
};
</script>

<style>
.container {
  display: flex;
  flex-wrap: wrap;
}
</style>

Route Lazy Loading#

Routes are one of the most common navigation methods on web pages. They allow us to display different components based on different paths. However, loading all route components at once can result in a long initial loading time, which may frustrate users. However, if we only load the route component that the user is currently accessing and delay loading other route components until the user clicks on the corresponding links, we can save bandwidth and improve user experience. This is the principle of route lazy loading.

In React, we can use the built-in APIs React.lazy and Suspense to implement route lazy loading. React.lazy allows us to define a lazy-loaded component using dynamic import syntax, and Suspense allows us to display a fallback content before the lazy-loaded component is rendered. For example:

import React, { Suspense } from 'react';
import { BrowserRouter, Route, Switch, Link } from 'react-router-dom';

// Define lazy-loaded components using React.lazy
const Home = React.lazy(() => import('./components/Home'));
const About = React.lazy(() => import('./components/About'));
const Contact = React.lazy(() => import('./components/Contact'));

function App() {
  return (
    <div className="App">
      <h1>React Route Lazy Loading Example</h1>
      <BrowserRouter>
        <div className="nav">
          <Link to="/">Home</Link>
          <Link to="/about">About</Link>
          <Link to="/contact">Contact</Link>
        </div>
        {/* Wrap routes with Suspense and specify fallback content */}
        <Suspense fallback={<div>Loading...</div>}>
          <Switch>
            <Route exact path="/" component={Home} />
            <Route path="/about" component={About} />
            <Route path="/contact" component={Contact} />
          </Switch>
        </Suspense>
      </BrowserRouter>
    </div>
  );
}

export default App;

In Vue, we can use dynamic import syntax to achieve route lazy loading. Dynamic import allows us to return the route component as a function when defining routes, enabling on-demand loading. For example:

import Vue from 'vue';
import Router from 'vue-router';

Vue.use(Router);

// Define route components using dynamic import
const Home = () => import('./components/Home.vue');
const About = () => import('./components/About.vue');
const Contact = () => import('./components/Contact.vue');

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
    },
    {
      path: '/about',
      name: 'about',
      component: About,
    },
    {
      path: '/contact',
      name: 'contact',
      component: Contact,
    },
  ],
});

Summary

This article has introduced how to implement image and route lazy loading in React and Vue, and provided some code examples. Lazy loading is a technique for optimizing web page performance. It allows us to load resources only when needed, thereby improving page loading speed and user experience.