Prüfen, ob eine Datei bereits in Webpack heruntergeladen/benötigt wurde?

Ich arbeite bei einer Firma, die eine benutzerdefinierte require Implementierung hat. Mit der Implementierung können Sie ein Modul nur dann anfordern, wenn es bereits heruntergeladen wurde. Wenn ein Codepath von einem Modul abhängt, aber der Codepath nicht immer getroffen wird, ist das Modul nicht immer erforderlich. Dies hat unsere Dateigröße drastisch reduziert.Prüfen, ob eine Datei bereits in Webpack heruntergeladen/benötigt wurde?

Hier ist ein Beispiel dafür, wie es nützlich sein kann:

if (page === PROFILE) { 
    // ProfileHelper should already be downloaded if we're on the profile page. 
    if (isRequired('ProfileHelper')) { 
    const ProfileHelper = require('ProfileHelper'); 
    ProfileHelper.doSomething(); 
    } else { 
    LogError('ProfileHelper isn\'t loaded on the profile page.'); 
    } 
} else if (page === FEED) { 
    // FeedHelper should already be downloaded if we're on the feed page. 
    if (isRequired('FeedHelper')) { 
    const FeedHelper = require('FeedHelper'); 
    FeedHelper.doSomething(); 
    } else { 
    LogError('FeedHelper isn\'t loaded on the feed page.'); 
); 
}

ProfileHelper nicht geladen wird auf Feed-Seiten und FeedHelper nicht auf Profilseiten geladen. Hat Webpack so etwas?

Es gibt eine mögliche Lösung hier: https://github.com/webpack/webpack/issues/526

Dies war jedoch von 2 Jahren und der Code sieht ziemlich hacky. Gibt es einen besseren Weg? Wenn das immer noch der beste Weg ist, lassen Sie es mich durch eine Antwort wissen und ich werde es als die richtige Antwort markieren.

Bearbeiten zur Klarstellung:

Wenn ich benötigt sowohl ProfileHelper und FeedHelper die ganze Zeit, dann eines der Module wird ungenutzt. Höchstens einer von ihnen wird auf jeder gegebenen Seite heruntergeladen.

Das hat nichts mit Deduplizierung zu tun.

bearbeiten

Das Unternehmen erzeugt viele verschiedene Pakete für verschiedene Seiten, aber diese Bündel viele Dateien gemeinsam nutzen. Diese Dateien verhalten sich je nach der Seite, auf der sie sich befinden, unterschiedlich. Oft werden nicht alle Module eine Dateiverweise für eine bestimmte Seite verwendet. In diesem Fall sind diese Dateien einfach nicht gebündelt.

Quelle

2016-12-08 Leo Jiang

Wenn Sie die Frage ist: Ist webpack de-Duplikat erforderlichen Module? Ja. –

Meine Frage ist, wie fordere ich etwas nur, wenn es bereits heruntergeladen wurde. –

Vielleicht, was Sie wirklich brauchen, ist Code-Splitting. https://webpack.github.io/docs/code-splitting.html – Ming

Webpack dedupliziert alle erforderlichen Module mehrmals, und bereits geladene Module werden nicht erneut initialisiert (gemäß der CommonJS-Spezifikation). Also, im Grunde benötigen Sie nur alle Ihre Abhängigkeiten und Sie sind fertig!

Noch wichtiger: wickeln Sie Ihre Anforderungen nicht ein, wenn Sie Webpack verwenden. Die statische Analyse, um festzustellen, welche Module Sie tatsächlich verwenden, wird nicht mehr ordnungsgemäß funktionieren, und Webpack wird zu viel bündeln.

Quelle

2016-12-08 23:47:42 Ambroos

Webpack seit v2 enthält auch nur die Abhängigkeiten, die verwendet werden. So verwenden Sie, wie Sie wollen, in Bündelprozess wird es nur einmal enthalten sein. –

Nur klärend, das hat nichts mit Deduplizierung zu tun. –

@ MichałIgnaszewski Alle Abhängigkeiten werden verwendet, aber nicht die ganze Zeit. I.e. Die gesamte Datei wird auf mehreren Seiten geladen, aber die Seiten verwenden nicht alle Codepatches. Die Abhängigkeiten gelten für bestimmte Codepläne. –

Dieser Ansatz steht im Gegensatz zur Bündelung mit Webpack.

Die require-Anweisungen sind genau das, was webpack anweist, was zu kompilieren ist. Die konditionellen Anforderungen werden nicht kompiliert, da diese zur Laufzeit ausgewertet werden (aber die Webpack-Bundles sind vorkompiliert) und Webpack hat keine davon in Ihre Bundles eingefügt.

Was Sie suchen, ist Code-Splitting: https://webpack.js.org/guides/code-splitting-require/

Tutorials:

Quelle

2017-02-03 07:37:30 shadymoses

Die Firma, bei der ich war, generierte viele verschiedene Pakete für verschiedene Seiten. Die meisten Module müssen nicht prüfen, in welchem Bundle sie benötigt werden, sie müssen lediglich prüfen, welche Module bereits benötigt wurden. Code-Aufteilung erhöht Netzwerkanforderungen, was ich möchte, erfordert keine zusätzlichen Netzwerkanforderungen. –

Prüfen, ob eine Datei bereits in Webpack heruntergeladen/benötigt wurde?

Antwort

Verwandte Themen