Grunt concurrent und time-grunt

Florian Müller Datum: 29. September 2016
Autor: Florian Müller


Gestern Abend bin ich auf einen Artikel gestoßen, welcher sich mit der Optimierung von Grunt Tasks beschäftigt hat. Vieles davon ist schon im Einsatz, aber eins hat dann doch noch gefehlt – die Parallelisierung. Dies habe ich heute morgen testweise bei einem Projekt integriert. Um vergleichbare Ergebnisse zu bekommen, welche unabhängig von anderen Build Tasks des Build Scripts sind, habe ich time-Grunt zum Einsatz gebracht.

Um Time-Grunt zu verwenden, muss der Task einmal via NPM installiert werden (npm install time-grunt --save-dev) und zum Gruntfile hinzugefügt werden (require('time-grunt')(grunt);). Das war es schon. Nun zeigt Grund nach allen Tasks eine Übersicht der Zeiten aller Tasks und die Gesamtzeit an.

Execution Time (2016-09-29 08:29:35 UTC+2)
loading tasks               2.1s  ▇▇▇ 9%
lesslint:src                5.9s  ▇▇▇▇▇▇▇▇▇ 24%
jshint:scripts              1.5s  ▇▇▇ 6%
jasmine:src                 1.4s  ▇▇ 6%
less:production             4.1s  ▇▇▇▇▇▇ 17%
uglify:production           5.3s  ▇▇▇▇▇▇▇▇ 22%
imagemin:dist               1.3s  ▇▇ 5%
filerev_replace:production  2.6s  ▇▇▇▇ 11%
Total 24.5s

Nun konnte ich mit der Parallelisierung der Grunt Tasks beginnen. Hierzu kam grunt-concurrent zum Einsatz. Um eine Vergleichbarkeit zu haben, habe ich den Grunt build Task mehrfach ausgeführt. Die Zeiten waren wie folgt:

  • 25.6s
  • 24.5s
  • 24.6s

Mittelwert: 24.9s

Nun habe ich Concurrent integriert. Die Syntax ist dabei denkbar einfach. Es werden einfach alle Tasks, die gleichzeitig lauten sollen, in ein Array geschrieben.

module.exports = {
  production: [
    'less:production',
    'uglify:production',
    'copy',
    'imagemin'
  ]
};

Nun wurde in der aliases.js der entsprechende Part durch concurrent ersetzt. Der Deployment Task sieht somit folgendermaßen aus:

...
  build: {
    ...
    tasks: [
      'test',
      'clean',
      'concurrent:production',
      'filerev',
      'filerev_replace',
      'filerev_assets',
      'usebanner'
    ]
  },
...

Hierbei war schon eine große Performance Optimierung von knapp 5 Sekunden zu bemerken. Klingt nicht viel, ist aber in Prozent ausgedrückt 20%.

  • 19.5s
  • 19.6s
  • 19.7s

Mittelwert: 19.6s

Nun ging es noch einen Schritt weiter. Ich habe zusammen mit Benni geschaut, welche Tasks man noch parallelisieren kann. Dabei kamen wir noch auf die Tests. Dazu habe ich die concurrent.js erweitert.

...
  test: [
    'lesslint',
    'jshint',
    'jasmine'
  ]
...

Dies wurde dann noch in die aliases.js eingetragen (concurrent:test).

Die Tests auf dem DEV ergaben folgende Ergebnisse:

  • 19.6s
  • 19.4s
  • 22.6s
  • 20.1s
  • 19.8s
  • 19.2s
  • 19.6s
  • 19.3s

Mittelwert: 19,95s

Auffällig hier sind die Ausreißer nach oben. Hier kann ich nur vermuten, dass diese durch zusätzliche Belastung des DEV kamen. Lässt man diese nun außen vor (19.8s-22.6s), so kommt man auf einen Mittelwert von 19.42 Sekunden. Wenn ein Test fehlschlägt, bricht sofort die ganze Abarbeitung an der Stelle ab und auch die anderen parallel laufenden Tasks werden gestoppt.

Insgesamt haben wir hiermit eine Performance Optimierung von 5,48 Sekunden.

Man muss Aufpassen, wenn man parallelisiert. Jeder Grunt Prozess lädt nochmals alle Tasks. Dies dauerte im Test jeweils 2.1s. Das muss man einrechnen, ob dann noch ein Performance Gewinn vorhanden ist. Auch kann nicht jeder Task parallel ablaufen, da sie aufeinander aufbauen oder beispielsweise nur durchgeführt werden dürfen, wenn der vorherige erfolgreich war (beispielsweise Löschen des dist Ordners darf nur passieren, wenn die Tests erfolgreich waren, damit immer gültiges JS und CSS vorhanden ist auf dem DEV).

Quelle: http://www.html5rocks.com/en/tutorials/tooling/supercharging-your-gruntfile/

Dieser Artikel wurde verschlagwortet unter:


Kommentare

Selber kommentieren:






Weitere Beiträge zum Thema Technologie


ModPagespeed & Kommentare in CSS

Autor: Sascha Nützel


Technologie


Beim gestrigen Tirol Deployment kam es zu interessanten Fehlermeldungen beim CSS Minify über ModPagespeed (Failed to load resource: net::ERR_INCOMPLETE_CHUNKED_ENCODING im Chrome bzw. 404 in FF/IE). Grund war eine Kommentierung im CSS mittels „//“, bitte verwendet daher im CSS „/* mein lustiger Kommentar */“.  


Beitrag lesen
26
AUG
16

Responsive Webdesign – Was hat das mit mir zu tun?

Autor: Axel Güldner


Projekte // Technologie // Über den Tellerrand // User Experience & Design


Das Thema Responsive Webdesign hat inzwischen jeden von uns, der mit offenen Augen durch das Internet läuft, mindestens einmal berührt. Quasi wie aus dem Nichts ist diese Disziplin über Nacht zum neuen Buzzword unter Webdesignern/Entwicklern und Marketingleuten geworden. Responsive Webdesign gilt einfach als sexy, auch wenn die eigentliche Idee dahinter nicht gerade neu ist. Jeder …


Beitrag lesen
18
JAN
12

YouTube Data-API v2 ist tot.

Autor: Benjamin Hofmann


Technologie


Wer es noch nicht mitbekommen hat, Google stellt die Version 2 seiner Data API für YouTube ein. Die Ankündigung für die Abschaltung der v2-API kam bereits im März 2014. Mehr Informationen gibt es hier: https://www.googlewatchblog.de/2015/04/youtube-data-api-viele/ Einen Migration-Guide von Google gibt es hier: https://developers.google.com/youtube/v3/migration-guide


Beitrag lesen
22
APR
15

CSS Selectors and Pseudo Selectors and browser support

Autor: Benjamin Hofmann


Technologie // User Experience & Design


Eben bin ich auf eine interessante Seite zum Thema Selektoren in CSS gestoßen, die sehr übersichtlich auflistet was geht und was nicht und vor allem in welchen Browsern dies der Fall ist. Leider ist die Seite nicht mehr ganz aktuell, aber für einen schnellen Überblick sollte sie allemal ausreichen. Und mit etwas Glück kommt auch …


Beitrag lesen
17
FEB
12