Grunt concurrent und time-grunt

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/

Kommentare

Selber kommentieren:






Weitere Beiträge zum Thema Technologie


Weitere Neuigkeiten von der JAX 2015

Autor: Christian Göbel


Technologie


Bevor es zu spät ist und alle Neuigkeiten und Trends von der JAX 2015 in den Tiefen meiner Erinnerungen verschwinden, möchte ich die Gelegenheit nutzen und Euch eine Fortsetzung zu meinem ersten Bericht von der diesjährigen JAX liefern. API-Design mit Java 8 Lambdas (Angelika Langer) Hier gab es eine kurze Einführung zu Lambda-Ausdrücken aus Java …


Beitrag lesen
30.
Juli
2015

PhotoSwipe: Responsive JavaScript Image Gallery

Autor: Benjamin Hofmann


Technologie // User Experience & Design


Ich bin gestern auf eine ziemlich geniale Lightbox-Lösung gestoßen: PhotoSwipe. Diese baut auf Vanilla JS auf und ist auf hohe Performance und die mobile Verwendung ausgelegt, bei der ja doch ziemlich viele Lightboxen scheitern oder von uns sogar deaktiviert werden. Und trotz all dieser Features sind das Skript und die dazugehörigen Styles sehr klein was …


Beitrag lesen
22.
Sep.
2016

Twitter Account-ID auslesen – 2013

Autor: Stefan Oswald


Technologie


Vor ca. 2 Jahren habe ich dazu schon mal einen Artikel geschrieben, aber die dort verlinkte Seite funktioniert nicht mehr. Es gibt aber eine neue Seite: http://mytwitterid.com/ Soweit ich weiß, versteckt Twitter die User-ID inzwischen komplett; man kann sie nur noch per API auslesen. Durch die Benutzung des verlinkten Tools muss man das nicht selbst …


Beitrag lesen
25.
Sep.
2013

<enki/>

Autor: Benjamin Hofmann


Technologie // Über den Tellerrand


Ich bin neulich über Enki, eine kleine interessante App für iPhone und Android gestolpert, die einem Entwickler zu bestimmten Themen täglich kleine Aufgaben gibt, die es zu lösen gilt. Das Ganze dient dazu in wenigen Minuten täglich etwas zusätzliches Wissen aufzubauen oder dieses zu vertiefen. Die App stellt sich wie ein typischer Fitness-Tracker da und …


Beitrag lesen
07.
Sep.
2016