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




webpack template engine (2)

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

Die require-Anweisungen sind genau das, was Webpack anweist, was zu kompilieren ist. Die bedingten 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/

Anleitungen:

Ich arbeite in einer Firma, die eine benutzerdefinierte Implementierung benötigt. 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.

Hier ist ein Beispiel, 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 auf ProfileHelper geladen und FeedHelper nicht auf Profilseiten geladen. Hat Webpack so etwas?

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

Dies war jedoch vor 2 Jahren und der Code sieht ziemlich hacky aus. 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.

Zur Klärung bearbeiten:

Wenn ich sowohl ProfileHelper als auch FeedHelper ganze Zeit benötigt habe, wird eines der Module nicht benutzt. Höchstens einer von ihnen wird auf jeder gegebenen Seite heruntergeladen.

Das hat nichts mit Deduplizierung zu tun.

Für maßgeblichen Anspruch bearbeiten

Das Unternehmen ist Facebook. Facebook generiert viele verschiedene Bundles für verschiedene Seiten, aber diese Bundles teilen viele Dateien. 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.


Webpack dedupliziert alle benötigten Module mehrfach, 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!

Wichtiger noch: 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.







require