web-dev-qa-db-de.com

92% Chunk Asset-Optimierung - Webpack

Es scheint, als würde das Webpack hängen bleiben 92% Chunk Asset-Optimierung für etwa 30 Sekunden, um eine einfache Änderung von JS/CSS anzuzeigen. Dies ist zu lang, als dass sich irgend jemand vernünftig hinsetzen könnte, um etwas zu sehen, was sofort in der Nähe sein sollte.

Wir befinden uns im Entwicklungsmodus (also brauchen wir Quellkarten, die die Latenz erhöhen), aber es sollte immer noch NICHT 30 Sekunden dauern. Auch verwenden wir kein uglify (was ich auf GitHub als sehr zeitaufwändig erwähnt gesehen habe).

Wie können wir erreichen, dass die Erstellungszeit nahezu augenblicklich ist oder viel schneller als jetzt?

UPDATE

Hier ist die laravel-mix-Datei:

let mix = require('laravel-mix');

mix.react('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css')
   .options({
     processCssUrls: false
   });

mix.webpackConfig({
    // Note: First build will always be slower regardless
    // Here we're talking about rebuild time

    // If commented out, rebuild is ~6 secs
    // devtool: "inline-source-map",

    // If not commented out, rebuild is 30+ secs
    devtool: "inline-source-map",
});

Ich fand, dass inline-source-map am besten für schnellstes Debugging geeignet ist, da es die detailliertesten Angaben zu der Fehlerzeile enthält, die in der Quelle zu beheben ist. Ich finde, andere Typen sind im Vergleich kryptischer und es gibt keinen Hinweis darauf, welche Zeilennummer in der Quelle festgelegt werden muss. Das Debuggen dauert also viel länger.

Wie macht ihr das? Gibt es eine Möglichkeit, wirklich schnell neu zu erstellen, während Sie dennoch mit der Fehlerzeilennummer in der Quelle debuggen können, um das Problem zu beheben (in Chrome devtools Console angezeigt)?

6
Wonka

Ich hatte großen Erfolg mit einer Kombination der folgenden: 

https://github.com/mzgoddard/hard-source-webpack-plugin

und

https://github.com/amireh/happypack

HardSourceWebpackPlugin ist ein Plugin für Webpack, das einen Zwischenspeicherungsschritt für Module bereitstellt. Um die Ergebnisse zu sehen, müssen Sie das Webpack zweimal mit diesem Plugin ausführen. Der erste Build nimmt die normale Zeit in Anspruch. Der zweite Build wird deutlich schneller.

HappyPack beschleunigt die Erstellung von Webpacks durch parallele Umwandlung von Dateien.

Berichten Sie zurück und lassen Sie mich wissen, wie es läuft.

1
KFE

Bei der Ausführung des Befehls ng build ist das gleiche Problem aufgetreten.

Ich habe folgenden Fehler erhalten:

Optimierung der Chunk-Anlagen um 92%

Der Prozess wurde bei 92% gestoppt, aber die folgenden Befehle funktionieren gut für mich.

Probiere diese:

pm2 stop all

ng build

pm2 start all

Ich benutze pm2 als Prozessmanager.

Ich hoffe es funktioniert auch für dich. 

0
hardy