Webpack Importe nicht benötigten Module aus verschachtelten Abhängigkeiten

Question

ich eine Reaktion Anwendung bin erstellen, meine Haupt-Abhängigkeiten sind React, react-dom, Redux, Immutable und einige andere kleine Bibliotheken. Das Problem ist, wenn ich die Anwendung mit webpack baue, lädt es einige zusätzliche Module, wie lodash und jQuery, weil sie geschachtelte Abhängigkeiten sind, was dazu führt, dass mein Build zu groß ist (überprüft mit WebpackBundleSizeAnalyzerPlugin). Wenn ich aber zum Beispiel nur die Funktion render von react-dom verwende, warum muss ich dann das ganze lodash-Modul zusätzlich laden? Ist es möglich, zu zwingen, dass webpack nur notwendige Teile verschachtelter Abhängigkeitsmodule anstelle von vollen lädt? Danke

Answer 1

Es klingt, dass Sie Webpack 1 verwenden, das nicht die Funktion enthält, die Sie möchten: Baumschütteln.

Webpack 2 hat Baumschütteln, das ist Live-Code-Import. Es bedeutet, dass es nur den Code und Teile der Bibliotheken bündelt, die Sie tatsächlich in Ihrer Anwendung verwenden, was weitaus besser ist als die Beseitigung von einfachem toten Code (zuerst Paket und dann nicht verwendeten Code entfernen).

Ich laufe in der Vergangenheit, erwägen Migration zu Webpack 2 und Sie werden diese tolle Funktion bekommen. Ich habe mein Bündel von 30MB auf 1MB. Mit der Minimierung ging es für eine dieser Apps auf 800k runter.

Wenn Sie Webpack 2 aus welchem ​​Grund auch immer nicht verwenden möchten, gibt es andere Alternativen wie rollup. Ich war erfolgreich mit beiden. Rollup hat eine viel einfachere Konfiguration, aber Webpack 2 ist immer noch mein Favorit, da seine inkrementellen Builds beim Betrachten von Assets effizienter (schneller) sind als Rollups Watcher. Beide resultierenden Bündel hatte etwa die gleiche Größe mit Rollup und webpack 2.

Nützliche Links:

Webpack 2 tree shaking

Migrating from webpack 1 to 2