web-dev-qa-db-fra.com

Optimisation des actifs de bloc de 92% - Webpack

Il semble que Webpack reste bloqué 92% d'optimisation des actifs de morceaux pendant environ 30 secondes ou plus pour afficher un simple changement js/css. C'est trop long pour quiconque sain d'esprit de s'asseoir et d'attendre une bonne partie de sa vie pour voir quelque chose qui devrait être rendu presque immédiatement.

Nous sommes en mode de développement (nous avons donc besoin de mappes de sources, ce qui ajoute au temps de latence), mais cela ne devrait pas durer plus de 30 secondes. De plus, nous n'utilisons pas uglify (ce que j'ai vu mentionné sur GitHub comme prenant beaucoup de temps).

Comment pouvons-nous obtenir le temps de construction pour être presque instantané, ou beaucoup plus rapide que maintenant?

METTRE À JOUR

Voici le fichier laravel-mix:

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",
});

J'ai trouvé que inline-source-map était le meilleur pour le débogage le plus rapide, car il fournit le plus de détails sur la ligne d'erreur à corriger dans la source, très très simple sur ce qu'il faut corriger où. Je trouve que d'autres types sont plus cryptiques en comparaison et il n'y a aucune indication sur le numéro de ligne à corriger dans la source, il faut donc beaucoup plus de temps pour déboguer.

Comment faites-vous les gars? Existe-t-il un moyen de reconstruire très rapidement tout en étant capable de déboguer avec le numéro de ligne d'erreur dans le source pour le résoudre (indiqué dans la console chrome devtools)?

javascriptreactjswebpackwebpack-2laravel-mix
6
Wonka

J'ai eu beaucoup de succès en combinant les éléments suivants: 

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

et

https://github.com/amireh/happypack

HardSourceWebpackPlugin est un plugin pour Webpack destiné à fournir une étape de mise en cache intermédiaire aux modules. Pour voir des résultats, vous devrez exécuter Webpack deux fois avec ce plugin: la première construction prendra le temps nécessaire. La deuxième construction sera considérablement plus rapide.

HappyPack accélère la construction initiale du webpack en transformant les fichiers en parallèle.

Faites rapport et laissez-moi savoir comment ça se passe.

1
KFE

J'ai rencontré le même problème lors de l'exécution de la commande ng build.

J'ai eu l'erreur suivante:

Optimisation des actifs de bloc de 92 %Killed

Le processus a été arrêté à 92%, mais les commandes suivantes fonctionnent correctement pour moi.

Essayez ces:

pm2 stop all

ng build

pm2 start all

J'utilise pm2 comme gestionnaire de processus.

J'espère que cela fonctionne pour vous aussi. 

0
hardy