Frühere Forschungen:

Wie im Wiki von Webpack angegeben, ist es möglich, das Analysetool zu verwenden, um die Build-Leistung zu optimieren:

von: https://github.com/webpack/docs/wiki/build-performance#hints-from-build-stats

Hinweise aus Build-Statistiken

Es gibt ein Analysetool, das Ihren Build visualisiert und Hinweise gibt, wie Buildgröße und Buildleistung optimiert werden können .

Sie können die erforderliche JSON-Datei generieren, indem Sie das Webpack --profile --json> stats.json ausführen

Ich generiere die Statistikdatei ( hier verfügbar ), lade sie in das Analyse-Tool von webpack hoch
und fordere auf der Registerkarte " Hinweise" das prefetchPlugin auf:

von: http://webpack.github.io/analyse/#hints

Lange Modulbauketten

Verwenden Sie Prefetching , um die Build-Leistung zu erhöhen. Rufen Sie ein Modul aus der Mitte der Kette vor .

Ich habe das Web von innen nach außen durchsucht, um die einzige Dokumentation zu finden, die auf prefechPlugin verfügbar ist:

von: https://webpack.js.org/plugins/prefetch-plugin/

PrefetchPlugin

new webpack.PrefetchPlugin([context], request)

Eine Anforderung für ein normales Modul, das aufgelöst und erstellt wird, noch bevor eine Anforderung erforderlich ist. Dies kann die Leistung steigern. Versuchen Sie zuerst, den Build zu profilieren, um clevere Prefetching-Punkte zu ermitteln .

Meine Fragen:

• Wie verwende ich prefetchPlugin richtig?
• Was ist der richtige Workflow, um ihn mit dem Analysetool zu verwenden?
• Woher weiß ich, ob das prefetchPlugin funktioniert? Wie kann ich es messen?
• Was bedeutet es, ein Modul aus der Mitte der Kette vorzuholen ?

Ich werde einige Beispiele wirklich schätzen

Bitte helfen Sie mir, diese Frage zu einer wertvollen Ressource für den nächsten Entwickler zu machen, der die Tools prefechPlugin und Analyze verwenden möchte. Danke dir.

Ja, die Dokumentation zum Pre-Fetch-Plugin ist so gut wie nicht vorhanden. Nachdem ich es selbst herausgefunden habe, ist es ziemlich einfach zu bedienen und es gibt nicht viel Flexibilität. Grundsätzlich werden zwei Argumente benötigt, der Kontext (optional) und der Modulpfad (relativ zum Kontext). Der Kontext in Ihrem Fall würde davon /absolute/path/to/your/project/node_modules/react-transform-har/ausgehen, dass sich die Tilde in Ihrem Screenshot auf node_modulesdie Auflösung des Webpacks node_module bezieht .

Das eigentliche Prefetch-Modul sollte idealerweise nicht mehr als drei Modulabhängigkeiten tief sein. In Ihrem Fall isFunction.jshandelt es sich also um das Modul mit der langen Build-Kette, und im Idealfall sollte es vorab abgerufen werdengetNative.js

Ich vermute jedoch, dass Ihre Konfiguration etwas Ungewöhnliches enthält, da sich Ihre Build-Chain-Abhängigkeiten auf Modulabhängigkeiten beziehen, die von Webpack automatisch optimiert werden sollten. Ich bin nicht sicher, wie Sie das bekommen haben, aber in unserem Fall sehen wir keine Warnungen über lange Build-Ketten in node_modules. Die meisten unserer langen Build-Ketten sind auf tief verschachtelte Reaktionskomponenten zurückzuführen, für die scss erforderlich ist. dh:

Unabhängig davon möchten Sie für jede der Warnungen ein neues Plugin hinzufügen, wie folgt:

plugins: [
    new webpack.PrefetchPlugin('/web/', 'app/modules/HeaderNav.jsx'),
    new webpack.PrefetchPlugin('/web/', 'app/pages/FrontPage.jsx')
];

Das zweite Argument muss eine Zeichenfolge zur relativen Position des Moduls sein. Hoffe das macht Sinn.

Die Mitte Ihrer Kette befindet sich wahrscheinlich dort, react-transform-hmr/index.jsda sie ungefähr zur Hälfte beginnt. Sie können versuchen, PrefetchPlugin('react-transform-hmr/index')Ihr Profil erneut auszuführen, um festzustellen, ob dies die Gesamtzeit für die Erstellung beschleunigt.