Skip to main content

Lazy Loading

  1. Pengertian Lazy-Loading dalam LWC: Lazy-loading adalah teknik di mana kita menunda pemuatan komponen atau sumber daya sampai benar-benar dibutuhkan. Dalam konteks LWC, ini berarti komponen tidak dimuat saat halaman pertama kali dimuat, tetapi hanya ketika diperlukan, misalnya saat pengguna melakukan tindakan tertentu.

  2. Implementasi Lazy-Loading di LWC: Salesforce menyediakan metode loadStyle() dan loadScript() dari modul lightning/platformResourceLoader untuk lazy-loading sumber daya statis. Untuk komponen LWC, kita dapat menggunakan dynamic import.

Contoh implementasi lazy-loading​

// parentComponent.js
import { LightningElement } from 'lwc';

export default class ParentComponent extends LightningElement {
    showChild = false;

    handleClick() {
        this.showChild = true;
    }

    renderedCallback() {
        if (this.showChild) {
            import('./childComponent')
                .then(() => {
                    console.log('Child component loaded successfully');
                })
                .catch(error => {
                    console.error('Error loading child component', error);
                });
        }
    }
}
<!-- parentComponent.html -->
<template>
    <lightning-button 
        label="Load Child Component" 
        onclick={handleClick}></lightning-button>
    
    <template lwc:if={showChild}>
        <c-child-component></c-child-component>
    </template>
</template>
// childComponent.js
import { LightningElement } from 'lwc';

export default class ChildComponent extends LightningElement {
    // Child component logic here
}
<!-- childComponent.html -->
<template>
    <div>This is a lazy-loaded child component</div>
</template>

Dalam contoh di atas:

  1. parentComponent memiliki tombol yang, ketika diklik, akan memicu pemuatan childComponent.

  2. Kita menggunakan import() di dalam renderedCallback() untuk memuat komponen anak secara dinamis.

  3. Komponen anak hanya dimuat ketika showChild menjadi true, yang dipicu oleh klik tombol.

  4. Best Practices untuk Lazy-Loading di LWC:

    • Gunakan lazy-loading untuk komponen yang berat atau jarang digunakan.
    • Pertimbangkan pengalaman pengguna - jangan terlalu menunda pemuatan komponen penting.
    • Gunakan error handling yang tepat untuk menangani kegagalan pemuatan.
    • Pertimbangkan untuk menambahkan indikator loading saat komponen sedang dimuat.

  5. Pertimbangan Performa:

    • Meskipun lazy-loading dapat meningkatkan kinerja awal, pastikan untuk tidak overuse karena dapat menyebabkan delay saat interaksi pengguna.
    • Lakukan pengujian performa untuk memastikan bahwa lazy-loading benar-benar meningkatkan kinerja aplikasi Anda.

  6. Debugging:

    • Gunakan browser developer tools untuk memantau network requests dan memastikan komponen dimuat sesuai harapan.
    • Manfaatkan Salesforce Lightning Inspector untuk debug komponen LWC Anda.

Dengan mengimplementasikan lazy-loading dengan bijak, Anda dapat secara signifikan meningkatkan kinerja aplikasi Salesforce Anda, terutama untuk aplikasi yang kompleks dengan banyak komponen.

Referensi​