M
MLOG
Impor Dinamis JavaScript: Menguasai Pemisahan Kode dan Pemuatan Lambat | MLOG | MLOG

Komponen Modal hanya dimuat saat pengguna mengklik tombol "Buka Modal".

3. Pemisahan Kode Berbasis Fitur

Pendekatan ini berfokus pada pemisahan kode berdasarkan fitur atau fungsionalitas yang berbeda dalam aplikasi Anda. Ini sangat berguna untuk aplikasi besar dengan fitur kompleks yang tidak selalu dibutuhkan oleh semua pengguna. Misalnya, situs e-commerce mungkin memuat secara lambat kode yang terkait dengan ulasan produk atau daftar keinginan hanya ketika pengguna berinteraksi dengan fitur-fitur tersebut.

Contoh (pemuatan lambat fitur pelaporan):

            import React, { useState, lazy, Suspense } from 'react';

const ReportingDashboard = lazy(() => import('./features/ReportingDashboard'));

function AdminPanel() {
  const [showReporting, setShowReporting] = useState(false);

  const handleShowReporting = () => {
    setShowReporting(true);
  };

  return (
    

      
      {showReporting && (
        Memuat Laporan...
}>
          
        
      )}
); } export default AdminPanel;

Komponen ReportingDashboard, yang kemungkinan besar berisi visualisasi data dan logika analitik yang kompleks, hanya dimuat ketika administrator mengklik tombol "Tampilkan Dasbor Pelaporan".

4. Pemisahan Kode Bersyarat

Teknik ini melibatkan pengimporan modul secara dinamis berdasarkan kondisi tertentu, seperti perangkat, browser, atau lokasi pengguna. Ini memungkinkan Anda untuk menyesuaikan kode aplikasi Anda dengan kebutuhan spesifik setiap pengguna, lebih lanjut mengoptimalkan kinerja dan pemanfaatan sumber daya. Pertimbangkan untuk menyajikan format gambar yang berbeda (misalnya, WebP untuk browser yang didukung) atau memuat polyfill hanya untuk browser lama.

Contoh (memuat polyfill untuk browser lama):

            async function loadPolyfills() {
  if (!('fetch' in window)) {
    await import('whatwg-fetch');
    console.log('Polyfill Fetch dimuat.');
  }

  if (!('Promise' in window)) {
    await import('promise-polyfill/src/polyfill');
    console.log('Polyfill Promise dimuat.');
  }
}

loadPolyfills();

Kode ini memeriksa apakah API fetch dan Promise didukung oleh browser. Jika tidak, ia secara dinamis mengimpor polyfill yang sesuai.

Strategi Pemuatan Lambat

Pemuatan lambat adalah teknik yang menunda pemuatan sumber daya hingga benar-benar dibutuhkan. Ini dapat secara signifikan meningkatkan waktu muat halaman awal dan mengurangi konsumsi bandwidth. Impor dinamis adalah alat yang ampuh untuk menerapkan pemuatan lambat dalam aplikasi JavaScript.

1. Pemuatan Lambat Gambar

Gambar seringkali menjadi kontributor utama ukuran halaman. Pemuatan lambat gambar memastikan bahwa gambar di bawah lipatan (yaitu, yang tidak langsung terlihat di viewport) hanya dimuat saat pengguna menggulir halaman ke bawah.

Contoh (menggunakan Intersection Observer API):

            const images = document.querySelectorAll('img[data-src]');

function preloadImage(img) {
  img.src = img.dataset.src;
  img.onload = () => {
    img.removeAttribute('data-src');
  };
}

const imgObserver = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      preloadImage(entry.target);
      observer.unobserve(entry.target);
    }
  });
});

images.forEach(img => {
  imgObserver.observe(img);
});

Dalam contoh ini, atribut data-src menyimpan URL gambar. Intersection Observer API digunakan untuk mendeteksi kapan gambar memasuki viewport, di mana pada saat itu gambar dimuat.

2. Pemuatan Lambat Video

Mirip dengan gambar, video juga dapat secara signifikan memengaruhi waktu muat halaman. Pemuatan lambat video mencegahnya dimuat sampai pengguna berinteraksi dengannya (misalnya, mengklik tombol putar).

Contoh (pemuatan lambat video menggunakan placeholder):

            

  Placeholder Video

Video awalnya diwakili oleh gambar placeholder. Saat pengguna mengklik tombol putar, sumber video dimuat dan video mulai diputar.

3. Pemuatan Lambat Iframe

Iframe, sering digunakan untuk menyematkan konten dari sumber pihak ketiga, juga dapat memengaruhi kinerja halaman. Pemuatan lambat iframe memastikan bahwa iframe hanya dimuat saat pengguna menggulir mendekatinya.

Contoh (pemuatan lambat iframe menggunakan Intersection Observer API):

            const iframes = document.querySelectorAll('iframe[data-src]');

function loadIframe(iframe) {
  iframe.src = iframe.dataset.src;
  iframe.onload = () => {
    iframe.removeAttribute('data-src');
  };
}

const iframeObserver = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      loadIframe(entry.target);
      observer.unobserve(entry.target);
    }
  });
});

iframes.forEach(iframe => {
  iframeObserver.observe(iframe);
});

Mirip dengan contoh pemuatan lambat gambar, kode ini menggunakan Intersection Observer API untuk mendeteksi kapan iframe memasuki viewport dan kemudian memuat konten iframe.

Webpack dan Impor Dinamis

Webpack adalah bundler modul populer yang menyediakan dukungan luar biasa untuk impor dinamis. Ia secara otomatis mendeteksi pernyataan impor dinamis dan membagi kode Anda menjadi beberapa potongan terpisah, yang kemudian dapat dimuat sesuai permintaan.

Konfigurasi:

Biasanya tidak diperlukan konfigurasi khusus untuk mengaktifkan impor dinamis di Webpack. Namun, Anda mungkin ingin mengonfigurasi pemisahan kode lebih lanjut dengan menggunakan fitur seperti:

Contoh (konfigurasi Webpack untuk pemisahan kode):

            module.exports = {
  // ...
  output: {
    filename: '[name].[chunkhash].js',
    chunkFilename: '[name].[chunkhash].js',
    path: path.resolve(__dirname, 'dist'),
  },
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all',
        },
      },
    },
  },
  // ...
};

Konfigurasi ini membuat potongan terpisah untuk pustaka vendor (kode dari node_modules) dan menggunakan hash unik untuk setiap potongan untuk memungkinkan caching browser.

React dan Impor Dinamis

React menyediakan dukungan bawaan untuk komponen pemuatan lambat menggunakan fungsi React.lazy() dan komponen Suspense. Ini memudahkan implementasi pemisahan kode dalam aplikasi React.

Contoh (pemuatan lambat komponen React):

            import React, { lazy, Suspense } from 'react';

const MyComponent = lazy(() => import('./MyComponent'));

function App() {
  return (
    Memuat...
}> ); } export default App;

Fungsi React.lazy() mengambil fungsi yang mengembalikan impor dinamis. Komponen Suspense menyediakan UI fallback saat komponen sedang dimuat.

Angular dan Impor Dinamis

Angular mendukung pemuatan lambat modul menggunakan konfigurasi peruteannya. Anda dapat mendefinisikan rute yang memuat modul sesuai permintaan, yang dapat secara signifikan meningkatkan waktu muat awal aplikasi Angular Anda.

Contoh (pemuatan lambat modul di Angular):

            import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  {
    path: 'feature',
    loadChildren: () => import('./feature/feature.module').then(m => m.FeatureModule)
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Dalam contoh ini, FeatureModule hanya dimuat saat pengguna menavigasi ke rute /feature.

Vue.js dan Impor Dinamis

Vue.js juga menyediakan dukungan untuk komponen pemuatan lambat menggunakan impor dinamis. Anda dapat menggunakan sintaks import() dalam definisi komponen Anda untuk memuat komponen sesuai permintaan.

Contoh (pemuatan lambat komponen Vue.js):

            Vue.component('async-component', () => ({
  // Komponen yang akan dimuat. Harus berupa Promise
  component: import('./AsyncComponent.vue'),
  // Komponen yang digunakan saat komponen asinkron sedang dimuat
  loading: LoadingComponent,
  // Komponen yang digunakan jika pemuatan gagal
  error: ErrorComponent,
  // Penundaan sebelum menampilkan komponen pemuatan. Default: 200ms.
  delay: 200,
  // Komponen kesalahan akan ditampilkan jika batas waktu
  // disediakan dan terlampaui.
  timeout: 3000
}))

Contoh ini mendefinisikan komponen asinkron bernama async-component yang memuat file AsyncComponent.vue sesuai permintaan. Ini juga menyediakan opsi untuk komponen pemuatan, kesalahan, penundaan, dan batas waktu.

Praktik Terbaik untuk Impor Dinamis dan Pemuatan Lambat

Untuk memanfaatkan impor dinamis dan pemuatan lambat secara efektif, pertimbangkan praktik terbaik berikut:

Pertimbangan Global

Saat menerapkan impor dinamis dan pemuatan lambat untuk audiens global, sangat penting untuk mempertimbangkan hal berikut:

Kesimpulan

Impor dinamis JavaScript menyediakan mekanisme yang kuat untuk menerapkan pemisahan kode dan pemuatan lambat, memungkinkan Anda mengoptimalkan kinerja aplikasi web Anda dan memberikan pengalaman pengguna yang unggul untuk audiens global. Dengan memisahkan kode Anda secara strategis berdasarkan rute, komponen, atau fitur, dan dengan memuat sumber daya secara lambat sesuai permintaan, Anda dapat secara signifikan mengurangi waktu muat awal, meningkatkan responsivitas, dan meningkatkan efisiensi aplikasi secara keseluruhan. Ingatlah untuk mengikuti praktik terbaik, mempertimbangkan pertimbangan global, dan terus memantau kinerja aplikasi Anda untuk memastikan bahwa Anda memberikan pengalaman terbaik bagi pengguna di seluruh dunia. Rangkullah teknik-teknik ini, dan saksikan aplikasi Anda berkembang pesat di lanskap digital global.