Wie kann man die Webpack/Babel-Build-Leistung verbessern, ohne die Watch-Funktion zu verwenden?

Question

Ich arbeite an einem SBT/Scala-Webprojekt und wollte die ES6-Funktionen und die neue Modul-Syntax für die Frontend-JavaScript-Ebene nutzen. SBT hat ein eigenes Build-System und ich habe es geschafft, ein existierendes sbt-Plugin zu optimieren, um Webpacks auszuführen, um meine JS-Dateien mit babel zu erstellen. Die aktuelle Lösung ist ein wenig unordentlich, aber es funktioniert und lebt im sbt-Build-System.

Das Problem ist, dass es langsam ist. Bei jeder Änderung wird eine neue Instanz von Webpack erstellt und alles komplett von Grund auf kompiliert.

Ich weiß, ich könnte aus dem sbt-Build-System springen und nur für die Entwicklungsphase webpack separat verwenden, um meine Dateien zu sehen und neu zu erstellen. Aber bevor ich das mache, habe ich mich gefragt, ob es einige Möglichkeiten gibt, den Webpack-Build-Prozess zu beschleunigen.

Ich überprüfte die Dokumentation und es scheint mir, dass jede verfügbare Zwischenspeicherung nur im Speicher behandelt wird, und das ist für meinen Fall nicht anwendbar. Oder gibt es eine Art von Dateicache, der zwischen den einzelnen Webpack-Builds überleben würde? Zum Beispiel alle meine npm Abhängigkeiten nicht die meiste Zeit ändern, so könnten sie kompiliert einmal werden gecached und dann einfach eingeschlossen ...

Answer 1

Einige Konfiguration zu berücksichtigen:

• module.loaders include - Sie sollten Stellen Sie include so ein, dass Sie auf Ihre Quelle zeigen. Standardmäßig wird alles durchlaufen (node_modules insbesondere ist langsam). Stellen Sie sicher, dass Sie es
• resolve.unsafeCache
• module.noParse
• babel-loader Caching aktivieren gesetzt haben - loader: 'babel?cacheDirectory'.
• aliasing already built, minified libraries
• Zukunft - cache - Dies könnte one day arbeiten. Leider gibt es keine nette Möglichkeit, die Cache-Daten noch zu serialisieren.

Answer 2

Webpack verfügt über eine Funktion, die Sie erstellen ‚DLLs‘ lassen (aka. „Bibliothek Bundles“), die Sie zusammenstellen können, einmal, getrennt von Ihrem Hauptanwendungscode. Ein typischer Arbeitsablauf wäre es, große, selten wechselnde Bibliotheken in ein Lieferantenbibliotheks-Paket zu packen, das Sie einmal kompilieren und dann ein viel kleineres Anwendungs-Bundle für Ihren eigenen Code erstellen können.

schrieb ich einen Beitrag darüber, wie hoch das hier tun: https://robertknight.github.io/posts/webpack-dll-plugins/

Von @ Vorschlägen bebraw die oben, ich insbesondere auf 1) Aliasing bestehende minimierte Bibliotheken statt, sie in dem Bündel zeigen würde - was die erreicht gleiche Vorteile wie Bibliothek Bundles erstellen und 2) Wenn Sie einen Transpiler verwenden, ist es wichtig, dass die Transpiler nur auf Ihrem eigenen Code über die module.loaders.(include|exclude) Optionen ausführen, die nicht alle der Bibliothek Code in node_modules/

Answer 3

das Problem ist, dass es langsam ist. Bei jeder Änderung wird eine neue Instanz von Webpack erstellt und alles komplett von Grund auf kompiliert.

Wir haben das gleiche Problem treffen, wenn unsere Modul-Basis groß (3.5k +) bekommt, wo webpack 13 so lange wie 80 Sekunden auf einem regulären MacBook nehmen würde das anfängliche Build auszuführen.

Der Ansatz, den ich war nahm die Transformationsphase (webpack Lader, im Grunde) parallelisieren, die einen Gewinn von bis zu 500% in Bezug auf der Bauzeit auf einigen Maschinen ergab. Check out https://github.com/amireh/happypack für das Plugin und sehen, ob es für Sie arbeiten kann.

Es ist nicht die Loader alle noch nicht unterstützt, aber babel-loader wird unterstützt, die ich glaube, ist, was Sie brauchen.