Detaillierte Erläuterung des Lazy Loading und Preloading von Webpack

Normale Belastung

Der Code in index.js ist sehr einfach gehalten, um die Anzeige zu vereinfachen.

console.log('index.js wird ausgeführt')
importiere { test } aus './test.js'
document.getElementById('btn-wrap').onclick = Funktion () {
    prüfen()
}

test.js

console.log('test.js ausgeführt')
Exportfunktion test() {
    Konstantenwert = "Hallo Welt"
    console.log('Testwert: ', Wert)
}

Fügen Sie in index.html eine Schaltfläche hinzu

    <button id='btn-wrap'>Klick</button>

Führen Sie den Webpack-Befehl aus:

Sie können sehen, dass test.js geladen wird, wenn die Schaltfläche nicht angeklickt wird. Wenn test.js groß ist, beeinträchtigt das Laden die Leistung. Wir hoffen, es laden zu können, wenn wir es brauchen.

Lazy Loading

Ändern Sie den Code in index.js

console.log('index.js wird ausgeführt')
// importiere { test } aus './test.js'
// Dokument.getElementById('btn-wrap').onclick = Funktion () {
//prüfen()
// }
document.getElementById('btn-wrap').onclick = Funktion () {
    console.log('==== Klicken Sie auf die Schaltfläche')
    importiere(/*webpackChunkName:'test' */"./test")
        .then(({test}) => {
            console.log('Test erfolgreich geladen')
            prüfen()
        })
        .catch(Fehler => {
            console.log('Fehler beim Laden des Tests fehlgeschlagen:', Fehler)
        })
}

Führen Sie den Webpack-Befehl erneut aus und zeigen Sie das Protokoll im Browser an

Vor dem Klicken auf die Schaltfläche wird nur index.js geladen

Klicken Sie auf die Schaltfläche:

Sie können sehen, dass test.js nach dem Klicken auf die Schaltfläche ausgeführt wird.

Vorladen

Lazy Loading implementiert das Laden von JS-Dateien bei Bedarf, d. h. sie werden nur geladen, wenn sie benötigt werden. Wenn die JS-Datei jedoch sehr groß ist und langsam geladen wird, führt das Laden während der Verwendung zum Einfrieren der Seite. Um dieses Problem zu optimieren, können Sie zunächst mit Prefetch vorladen.

Kein Vorladen verwenden

Die Datei test.js wird erst geladen, wenn auf die Schaltfläche geklickt wird

Die Datei test.js wird erst geladen, wenn Sie auf die Schaltfläche klicken

Verwenden von Preload

Setzen Sie webpackPrefetch:true , um das Vorladen zu verwenden

document.getElementById('btn-wrap').onclick = Funktion () {
    console.log('==== Klicken Sie auf die Schaltfläche')
    importiere(/*webpackChunkName:'test' ,webpackPrefetch:true*/"./test")
        .then(({test}) => {
            console.log('Test erfolgreich geladen')
            prüfen()
        })
        .catch(Fehler => {
            console.log('Fehler beim Laden des Tests fehlgeschlagen:', Fehler)
        })
}

Vor dem Klicken auf die Schaltfläche wird die Datei test.js vorgeladen:

Klicken Sie auf die Schaltfläche:

Zusammenfassen

Normales Laden : Viele Ressourcen werden parallel geladen und mehrere Dateien werden gleichzeitig geladen

Lazy Loading : Laden nur bei Bedarf

Vorladen : Warten Sie, bis andere Ressourcen geladen sind und der Browser inaktiv ist, und laden Sie dann heimlich die Ressourcen, die vorgeladen werden sollen

Dieser Artikel endet hier. Ich hoffe, er kann Ihnen helfen. Ich hoffe auch, dass Sie mehr Inhalt auf 123WORDPRESS.COM lesen können!