Cara lazyload Javascript menggunakan LocalStorage

Performa situs web merupakan faktor krusial dalam memberikan pengalaman pengguna yang lancar dan menyenangkan. Salah satu teknik umum untuk meningkatkan performa adalah pemuatan JavaScript secara lazy. Pemuatan lazy memungkinkan Anda memuat berkas JavaScript hanya saat dibutuhkan, sehingga mengurangi waktu muat halaman awal dan menghemat bandwidth. Dalam tutorial ini, kita akan mengeksplorasi perubahan menarik pada pemuatan lazy dengan memanfaatkan kekuatan LocalStorage, sebuah teknologi penyimpanan web yang tersedia di peramban modern. Di akhir panduan ini, Anda akan memiliki pemahaman yang mendalam tentang cara menerapkan pemuatan lazy dengan LocalStorage dan mengoptimalkan performa situs web Anda.

Lazyload Javascript using LocalStorage | Fineshop Design

Saya telah menulis Pustaka JavaScript yang dapat digunakan untuk memuat sumber daya secara lazy. Untuk menggunakannya, tempel kode JavaScript berikut di bagian kepala halaman web Anda.

/*!
 * lazy.js by Fineshop Design
 * ----------------------------
 *
 * MIT License
 *
 * Copyright (c) 2021 Fineshop Design
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all
 * copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 * SOFTWARE.
 */
window.lazy =
  window.lazy ||
  new Promise((resolve) => {
    const LOCAL_KEY = "IS_LAZIED";
    const LOCAL_VALUE = "true";
    // Window events to be attached initially which can trigger lazy
    const WINDOW_INITIAL_EVENTS = ["scroll", "click"];
    // Window events to be attached after window is fully loaded which can trigger lazy
    const WINDOW_ONLOAD_EVENTS = [
      "keydown",
      "mouseover",
      "touchmove",
      "touchstart",
    ];
    // All window events which will be attached
    const WINDOW_EVENTS = WINDOW_INITIAL_EVENTS.concat(WINDOW_ONLOAD_EVENTS);

    function getLazied() {
      try {
        return localStorage.getItem(LOCAL_KEY) === LOCAL_VALUE;
      } catch (_) {
        return true;
      }
    }
    function setLazied(lazied = true) {
      try {
        if (lazied) {
          localStorage.setItem(LOCAL_KEY, LOCAL_VALUE);
        } else {
          localStorage.removeItem(LOCAL_KEY);
        }
      } catch (_) {
        // do nothing
      }
    }
    function execute(data) {
      setLazied(true);
      resolve({ type: data.type.toLowerCase() });
      // detach event listeners
      for (const type of WINDOW_EVENTS) {
        window.removeEventListener(type, execute);
      }
    }
    if (getLazied()) {
      resolve({ type: "local" });
    } else {
      // check if document is already scrolled
      if (
        document.documentElement.scrollTop !== 0 ||
        (document.body && document.body.scrollTop !== 0)
      ) {
        execute({ type: "scroll" });
      } else {
        // events to be attached after window is loaded
        const onLoad = () => {
          window.removeEventListener("load", onLoad);
          for (const type of WINDOW_ONLOAD_EVENTS) {
            window.addEventListener(type, execute);
          }
        };
        window.addEventListener("load", onLoad);

        // events to be attached initially
        for (const type of WINDOW_INITIAL_EVENTS) {
          window.addEventListener(type, execute);
        }
      }
    }
  });

Penggunaan

Promise lazy diselesaikan ketika pengguna berinteraksi dengan halaman, dan seterusnya. Setelah promise diselesaikan, Anda dapat memuat JavaScript eksternal, stylesheet, atau membuat permintaan HTTP.

lazy.then((e) => {
  // Load your JS or CSS dynamically
  // Make HTTP requests
  console.log(e.type) // could be 'scroll', 'click', 'keydown', 'mouseover', 'touchmove', 'touchstart' or 'local'
});

Contoh

Di sini saya telah menulis fungsi Javascript loadJS untuk memuat Javascript dari sumber eksternal secara dinamis.

/**
 * Function to load Javascript file
 *
 * @author Deo Kumar <deo@fineshopdesign.com>
 *
 * @param {string | URL} source - Source of the script
 * @param {((script: HTMLScriptElement) => void) | null} [beforeLoad] - Function for modifying script element before loading
 *
 * @returns {Promise<HTMLScriptElement>} - Returns a Promise which resolves with HTMLScriptElement instance
 */
window.loadJS = function loadJS(source, beforeLoad) {
  return new Promise((resolve, reject) => {
    const script = document.createElement("script");

    // Enable async and defer by default
    Object.assign(script, { async: true, defer: true });

    if (typeof beforeLoad === "function") {
      beforeLoad(script);
    }

    function cleanUp() {
      script.onload = null;
      script.onerror = null;
    }

    script.src = source instanceof URL ? source.href : source;
    script.onload = (e) => {
      cleanUp();
      resolve(e.target);
    };
    script.onerror = (e) => {
      cleanUp();
      reject(new URIError(`The script ${e.target.src} didn't load correctly.`));
    };

    const firstScript = document.getElementsByTagName("script")[0];

    if (firstScript && firstScript.parentNode) {
      firstScript.parentNode.insertBefore(script, firstScript);
    } else {
      document.head.appendChild(script);
    }
  });
}

Kita dapat menggunakannya dalam fungsi panggilan balik lazy.then() seperti yang ditunjukkan di bawah ini:

lazy.then(() => { 
  return loadJS("./my-example-script.js", (script) => {
    // Add async attribute before loading
    script.async = true;
  });
}).then(() => {
  // JS is lazyloaded, perform actions here
  // myExampleLib.myMethod();
});

Lazyload Adsense Script

Anda dapat melakukan lazyload AdSense Script menggunakan pustaka ini, contohnya ditunjukkan di bawah ini:

lazy.then(() => {
  const adsenseScriptSource = "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXXXXXXXXXXX";
  return loadJS(adsenseScriptSource, (script) => {
    script.async = true;
    script.crossOrigin = "anonymous";
  });
}).then(() => {
  // Adsense script loaded
  // ...
});

Kesimpulan

Pemuatan JavaScript lazy menggunakan LocalStorage merupakan strategi ampuh untuk meningkatkan performa dan pengalaman pengguna situs web Anda. Dengan menunda pemuatan skrip yang tidak penting hingga dibutuhkan, Anda dapat mempercepat waktu muat halaman awal dan mengurangi penggunaan bandwidth. Tutorial ini akan memandu Anda melalui proses penerapan teknik ini secara efektif, membantu Anda menciptakan situs web yang lebih cepat dan efisien bagi pengguna Anda.

Copyright (c):
fineshopdesign.com